OTP field

The component draws the slots as boxes and stacks one invisible TextField over them. The field's background, text and border are transparent, so tapping the boxes opens the keyboard and typing fills the slots from left to right. One field serves all the slots, so paste and backspace behave as they do in any text field.

Mob has no focus control, so the active slot comes from the length of the value. That is the slot that focus would pick on the web. A caret needs focus, though. The field reports on_focus and on_blur, so keep a focused flag on the screen and pass it back. Without it no caret is drawn, and a tapped field looks the same as an untapped one.

The screen owns the value. The invisible field has no max_length, so a pasted 123-456 arrives whole. MishkaOtpField.sanitize/2 drops the characters that validation_type does not allow and truncates the rest to length, which turns that paste into 123456. MishkaOtpField.complete?/2 returns true when the code fills every slot, so the screen can decide when to submit.

validation_type also picks the keyboard. :numeric, the default, opens the number keyboard. :alpha, :alphanumeric and :none open the text keyboard.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob otp_field

The generator registers the <OtpField> tag so you can use it in ~MOB markup. It also copies the shared Event support module, unless you pass --no-kit. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaOtpField>. Without a prefix the tag is <OtpField>.

Render <MishkaOtpField> with a value, a length and an on_change tag. The default is six numeric slots. In handle_info/2, pass the raw text through MishkaOtpField.sanitize/2 and assign the result. The generator registers the tag with Mob.Composite.register/2, as the first comment in the snippet shows. The last comment shows the function form, otp_field/1, which gives the same output.

Six-digit OTP field

LTR RTL

Preview

Show the whole example Show less

# Registered once at boot, then it is a tag like any other:
#   Mob.Composite.register(:mishka_otp_field, {MishkaOtpField, :expand})

def render(assigns) do
  ~MOB"""
  <Column fill_width={true}>
    <MishkaOtpField value={@code} length={6} on_change={:code} />
  </Column>
  """
end

def handle_info({:change, :code, raw}, socket) do
  {:noreply, assign(socket, :code, MishkaOtpField.sanitize(raw, length: 6))}
end

# The function form is still there and gives identical output, for
# anything a tag cannot express:
#
#   import MishkaMob.Components.MishkaOtpField, only: [otp_field: 1]
#   {otp_field(value: @code, length: 6, on_change: :code)}

Set mask={true} to draw • in a filled slot instead of the character, and length to change the number of slots. This example uses four.

Masked OTP field with fewer slots

LTR RTL

Preview

Show the whole example Show less

~MOB"""
<Column fill_width={true}>
  <MishkaOtpField value={@code} length={4} mask={true} on_change={:code} />
</Column>
"""

group splits the slots and separator draws a string between the groups. An integer divides evenly: group={3} over six slots reads as 123-456. A list divides unevenly, so group={[2, 4]} gives a reference such as Ab-5563, two slots and then four. Set both props, because one without the other does nothing. The last slot never gets a separator. This example also sets validation_type={:alphanumeric} to allow letters.

Grouped OTP field with a separator

LTR RTL

Preview

Show the whole example Show less

~MOB"""
<Column fill_width={true}>
  <MishkaOtpField value={@ref} length={6} group={[2, 4]} separator="-"
                  validation_type={:alphanumeric} on_change={:ref} />
</Column>
"""

# an even split needs only a number:
#   <MishkaOtpField value={@code} length={6} group={3} separator="-" />

Props of the <MishkaOtpField> tag.

Your screen receives these messages in handle_info/2:

• on_change sends {:change, tag, text} with the raw text.
• on_focus and on_blur send {:focus, tag} and {:blur, tag}. These are not taps.

To draw the caret, keep a focused? flag on the screen and update it from the focus and blur messages.

<MishkaOtpField
  value={@code}
  focused={@focused?}
  on_change={:code}
  on_focus={:code_focus}
  on_blur={:code_blur}
/>

def handle_info({:change, :code, raw}, socket) do
  code = MishkaOtpField.sanitize(raw, length: 6)
  {:noreply, assign(socket, :code, code)}
end

def handle_info({:focus, :code_focus}, socket), do: {:noreply, assign(socket, :focused?, true)}
def handle_info({:blur, :code_blur}, socket), do: {:noreply, assign(socket, :focused?, false)}

• The web renders one <input> per slot and moves focus between them. Mob draws the slots and puts one invisible field over them.
• group accepts a list as well as an integer. The web divides evenly only.
• Not ported: name (form plumbing), auto_complete and input_mode (browser hints), transform and the *_class attributes.
• auto_submit is not ported. The screen decides, using complete?/2.
• id is kept as a native test tag, which is how an end-to-end test finds the invisible input.

• Headless OTP Field, the web component this one ports.
• Mob Mask Input, a text field that formats itself to a pattern.
• Mob Number Field and Mob Field, other form controls.
• Mob components, the full list of native components.