Forms.number_field · Cinder UI

`Forms.number_field`

Server-rendered

Renders a number input with increment and decrement controls.

Keyboard interaction comes from the native type="number" input, so arrow keys, min/max constraints, and step behavior stay browser-native while the buttons provide a touch-friendly affordance.

With FormField

<.number_field field={@form[:quantity]} />

With label

<.number_field field={@form[:quantity]} label="Quantity" />

With explicit errors

<.number_field field={@form[:quantity]} label="Quantity" errors={["must be positive"]} />

Inside field composition

<.field>
  <:label><.label for={@form[:quantity].id}>Quantity</.label></:label>
  <.number_field field={@form[:quantity]} />
  <:description>Enter a positive number.</:description>
</.field>

Basic number field

  <.number_field id="seat-count" name="seats" value={3} min={1} max={10} />

Fractional step

  <.number_field id="discount" name="discount" value={1.5} min={0} max={5} step={0.5} />

Attributes

Name	Type	Default	Values	Global Includes
`class`	`:string`	—	—	—
`decrement_label`	`:string`	`"Decrease value"`	—	—
`disabled`	`:boolean`	`false`	—	—
`errors`	`:list`	—	—	—
`field`	`{:struct, Phoenix.HTML.FormField}`	—	—	—
`id`	`:string`	—	—	—
`increment_label`	`:string`	`"Increase value"`	—	—
`input_class`	`:string`	—	—	—
`label`	`:string`	—	—	—
`max`	`:any`	—	—	—
`min`	`:any`	—	—	—
`name`	`:string`	—	—	—
`placeholder`	`:string`	—	—	—
`rest`	`:global`	—	—	`autocomplete` , `readonly` , `required` , `inputmode` , `aria-label`
`step`	`:any`	`1`	—	—
`value`	`:any`	—	—	—

Slots

No slots declared.