Number field

Number Field renders one bordered strip: a minus stepper, a hairline, the centered value, a hairline and a plus stepper. The value is Mob's native TextField with a numeric keyboard, so the platform brings the right keypad. A whole-number step opens the number pad, and a fractional step opens the decimal pad. The steppers are tappable boxes. The inner field draws no box of its own, so the strip's border is the only outline.

The screen owns the value. The steppers send on_step taps and the field sends on_change text, and your handler turns both into the next value. Two pure functions do that work:

• MishkaNumberField.parse/2 turns typed text into a number, or into nil while the text is not a number yet. A lone "-", a trailing "." and an empty string are partial input, not errors.
• MishkaNumberField.step/3 moves a value by one step, clamps it into [min, max] and rounds it to the step's own precision. Stepping 0.1 up from 0.3 gives 0.4, not 0.4000000000000001.

A stepper goes inert at its bound, as well as when the field is disabled, so a plus button that cannot go up does not look pressable. MishkaNumberField.at_bound?/3 tells you whether a step would do nothing.

The value slot stays one line

The platform field draws its placeholder in a text of its own, and that text wraps when the slot is too narrow. Nothing in the component can tell it to stop. So the component sizes the slot for the placeholder as well as the value, whether or not the field is empty. That also keeps the strip from changing width when the first digit goes in. An empty field with placeholder="How many?" in a 96dp slot would wrap over three lines, and the strip would grow to twice the height of one that holds a value.

The slot takes its height from the field. Pin your own value_width too narrow for the placeholder and the placeholder wraps again.

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

mix mishka.ui.gen.mob number_field

The generator registers the <NumberField> 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 <MishkaNumberField>. Without a prefix the tag is <NumberField>.

Set min and max to bound the value and on_step to receive taps on the steppers. The default step is 1, so the number pad opens. When a stepper is tapped, the handler asks MishkaNumberField.step/3 for the next value, and the result is clamped into the range.

Whole number field with a range

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Steppers clamp into the range.

<MishkaNumberField value={@qty} min={1} max={10} on_change={:qty} on_step={:qty_step} />

def handle_info({:tap, {:qty_step, dir}}, socket) do
  {:noreply, assign(socket, :qty, MishkaNumberField.step(socket.assigns.qty, dir, min: 1, max: 10))}
end

A fractional step such as 0.1 switches the keypad to the decimal pad. The value shows one decimal, the number of decimals the step implies. Set decimals to choose a different display precision.

Decimal steps

LTR RTL

Preview

Show the whole example Show less

<MishkaNumberField value={@rate} step={0.1} min={0} max={1} />

format changes how the value reads. The assign keeps the plain number. :currency shows a dollar sign and comma thousands separators, so 1999.99 reads as $1,999.99. :percent shows a fraction as a percentage, so the stored 0.075 reads as 7.5%. The default is :plain.

Currency and percent formats

LTR RTL

Preview

Show the whole example Show less

<MishkaNumberField value={@price} step={0.01} format={:currency} />
<MishkaNumberField value={@pct} step={0.001} format={:percent} />

The strip is as wide as its parts: two steppers, two hairlines and the value slot. The slot has a fixed width that the component estimates from the rendered text and the placeholder. Pass value_width to set it yourself, or fill_width={true} to span the parent.

Number field width

LTR RTL

Preview

Show the whole example Show less

<MishkaNumberField value={@qty} fill_width={true} />

A field with value={nil} shows its placeholder. The slot is wide enough for the placeholder, so it stays on one line. MishkaNumberField.step/3 treats an empty value as a starting point, so the first tap on the plus button gives min. With min={5} that is 5. disabled={true} mutes the field and unwires everything.

Empty and disabled number field

LTR RTL

Preview

Show the whole example Show less

<MishkaNumberField value={nil} min={5} placeholder="How many?" />

Props of the <MishkaNumberField> tag.

Your screen receives these messages in handle_info/2:

• on_change sends {:change, tag, text} as the user types in the value field. The text is raw, so pass it to MishkaNumberField.parse/2.
• on_step sends {:tap, {tag, :up}} or {:tap, {tag, :down}} when the user taps the plus or minus button. Pass the direction to MishkaNumberField.step/3.

A stepper at its bound sends nothing, and neither does a disabled field.

def handle_info({:change, :qty, text}, socket) do
  {:noreply, assign(socket, :qty, MishkaNumberField.parse(text, min: 1, max: 10))}
end

def handle_info({:tap, {:qty_step, dir}}, socket) do
  {:noreply, assign(socket, :qty, MishkaNumberField.step(socket.assigns.qty, dir, min: 1, max: 10))}
end

These parts of the web component are not ported:

• name, which is form plumbing.
• small_step and large_step, which are modifier-key gestures. A phone has no Shift or Alt key.
• snap_on_step and allow_out_of_range. The port always clamps into the range.
• Press and hold to repeat. Android's bridge has no long-press event, while iOS has onLongPress.
• Scrub to change, a pointer drag on the label.
• The *_class attributes.

• Headless Number Field, the web component this one ports.
• Mob Field, to add a label, hint and errors around the number field.
• Mob Slider and Mob OTP Field, two other ways to enter a value.
• Mob components, the full list of native components.