A color field: the native color input shown as a swatch, its hex value beside it, and optional preset swatches.

<.color_input field={@form[:brand]} label="Brand color" />
<.color_input name="accent" value="#7c3aed" label="Accent"
  presets={[{"Violet", "#7c3aed"}, {"Teal", "#0d9488"}, "#dc2626"]} />

The native <input type="color"> stays the source of truth, so the form submits it and phx-change fires as usual; picking a preset writes to the input and dispatches its events. Presets are a radio group: arrow keys move between swatches, Space or Enter picks one, and each swatch is named by its label or hex value.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any) - hex color like #7c3aed.
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• presets (:list) - hex strings or {label, hex} tuples. Defaults to [].
• presets_label (:string) - defaults to "Preset colors". Defaults to nil.
• show_value (:boolean) - Defaults to true.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• disabled (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "form", "list"].

Renders a number input with decrement and increment buttons.

<.number_input field={@form[:qty]} label="Quantity" min={1} max={10} />

The buttons step the native input, so min, max and step are honoured and phx-change fires as if the user typed.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• step (:any) - Defaults to 1.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• disabled (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["placeholder", "autocomplete", "inputmode", "readonly"].

A password field with a show/hide toggle.

<.password_input field={@form[:password]} label="Password" autocomplete="current-password" required />

The toggle is a pressed-state button labelled "Show password"; the input's type flips between password and text. Everything else matches input/1.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• disabled (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "placeholder", "minlength", "maxlength", "pattern", "readonly"].

Renders a one-time-code input: one box per character, auto-advancing, with paste support. The combined value submits under name via a hidden input.

<.pin_input field={@form[:code]} label="Verification code" length={6} />

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• length (:integer) - Defaults to 6.
• type (:string) - Defaults to "numeric". Must be one of "numeric", or "alphanumeric".
• mask (:boolean) - hide characters like a password. Defaults to false.
• separator_after (:integer) - draw a separator after this many boxes. Defaults to nil.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• disabled (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Renders a star rating. Interactive ratings are radio buttons (form-native, keyboard-native); readonly renders static stars.

<.rating field={@form[:stars]} label="Your rating" />
<.rating value={4} readonly label="Average rating" show_value />

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) (required) - accessible name (visually hidden).
• max (:integer) - Defaults to 5.
• readonly (:boolean) - Defaults to false.
• show_value (:boolean) - Defaults to false.
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• field (Phoenix.HTML.FormField)
• disabled (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Renders a range slider with a live value readout.

<.slider field={@form[:volume]} label="Volume" min={0} max={100} step={5} />
<.slider name="temp" value={20} label="Temperature" min={-10} max={40} marks={["-10°", "40°"]} />

Built on the native range input: it submits with the form, fires phx-change, and is keyboard accessible without JavaScript. The hook only updates the readout and the filled track.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• min (:any) - Defaults to 0.
• max (:any) - Defaults to 100.
• step (:any) - Defaults to 1.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• show_value (:boolean) - Defaults to true.
• format (:string) - readout format, "%v" is the value, e.g. "%v%". Defaults to "%v".
• marks (:list) - labels spread under the track. Defaults to [].
• color (:string) - Defaults to "accent". Must be one of "accent", "success", or "danger".
• disabled (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["list"].

Renders a free-form tag input. Each tag submits as name[]; Enter, comma or Tab adds the typed text, Backspace removes the last tag.

<.tag_input field={@form[:tags]} label="Tags" placeholder="Add a tag…" />

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any) - list of tags.
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• placeholder (:string) - defaults to "Add…". Defaults to nil.
• max (:integer) - Defaults to nil.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• disabled (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.