A button.

<.button>Save</.button>
<.button variant="primary" type="submit">Create account</.button>
<.button variant="danger" phx-click="delete">Delete</.button>

Attributes

• variant (:string) - Defaults to "secondary". Must be one of "primary", "secondary", "ghost", or "danger".
• type (:string) - Defaults to "button".
• size (:string) - Defaults to nil.Must be one of nil, "sm", "md", or "lg".
• icon_only (:boolean) - square icon button; provide an aria-label. Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value", "aria-label"].

Slots

• inner_block (required)

A checkbox styled as a chip — for multi-pick chip groups. Real checkboxes, so they submit under one array name.

<.chip_toggle :for={p <- @perms} field={@form[:perms]} value={p} label={p} />

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:string) (required)
• checked (:boolean) - Defaults to nil.
• label (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled"].

Slots

• inner_block

Inline error message(s) for a field. Rendered with an id so the control can reference it via aria-describedby.

Attributes

• id (:string) - Defaults to nil.
• errors (:list) - Defaults to [].

A labelled text input. Drive it with a form field:

<.input field={@form[:email]} type="email" label="Work email" required />

or bare attributes:

<.input name="q" value={@q} placeholder="Search…" />

Polymorphic, like CoreComponents.input/1: type="checkbox", "select" (pass options), "textarea", and "hidden" render the matching Skua control, so generated phx.gen.auth/phx.gen.live forms work unchanged and look Skua-styled.

<.input field={@form[:role]} type="select" options={[{"Admin", "admin"}]} prompt="Pick…" />
<.input field={@form[:agree]} type="checkbox" label="I agree" />
<.input field={@form[:bio]} type="textarea" rows={4} label="Bio" />

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• type (:string) - Defaults to "text".
• label (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• hint (:string) - Defaults to nil.
• errors (:list) - Defaults to nil.
• required (:boolean) - Defaults to false.
• checked (:boolean) - checkbox: explicit checked state. Defaults to nil.
• options (:list) - select: options (any Phoenix options_for_select format). Defaults to [].
• multiple (:boolean) - select: allow multiple. Defaults to false.
• prompt (:string) - select: leading empty prompt option. Defaults to nil.
• rows (:integer) - textarea: rows. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "inputmode", "min", "max", "step", "pattern", "readonly", "disabled"].

Slots

• leading - icon/affix before the input.
• trailing - icon/affix after the input.

A field label. Pass for to associate it with a control id.

Attributes

• for (:string) - Defaults to nil.
• required (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.

Slots

• inner_block (required)

A segmented code / OTP input. A hidden <input> carries the combined value, so phx-change/phx-submit work.

<.otp_input field={@form[:code]} length={6} group={3} />

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• length (:integer) - Defaults to 6.
• mode (:string) - Defaults to "numeric". Must be one of "numeric", or "text".
• group (:integer) - insert a separator every N cells. Defaults to nil.
• label (:string) - Defaults to nil.
• errors (:list) - Defaults to nil.

A single-select segmented control — real radio inputs, so it submits and works with phx-change natively (no JavaScript).

<.segmented field={@form[:view]} options={["List", "Board", "Calendar"]} />
<.segmented field={@form[:plan]} options={[{"Monthly", "mo"}, {"Yearly", "yr"}]} label="Billing" />

Options take any {label, value} / bare-value form, like select/1. The selected segment comes from the field value (or an explicit value).

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• options (:list) (required)
• label (:string) - Defaults to nil.
• errors (:list) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled"].

A slider. Single-handle by default; pass range for a two-handle range with independently draggable thumbs. Drag with the mouse/touch or operate with the keyboard (←/→/↑/↓, PageUp/Down, Home/End); ARIA slider roles throughout. Values post through hidden inputs so phx-change/submit work with no JS glue.

<.slider field={@form[:volume]} min={0} max={100} value={40} label="Volume" />
<.slider name="price" range value={[20, 80]} min={0} max={100} step={5} label="Price" />

Single posts under name; range posts under name[min] / name[max].

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - single: a number; range: a [lo, hi] list. Defaults to nil.
• min (:integer) - Defaults to 0.
• max (:integer) - Defaults to 100.
• step (:integer) - Defaults to 1.
• range (:boolean) - Defaults to false.
• label (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

A labelled multi-line textarea. Same field API as input/1.

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• label (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• hint (:string) - Defaults to nil.
• errors (:list) - Defaults to nil.
• required (:boolean) - Defaults to false.
• rows (:integer) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["readonly", "disabled", "maxlength", "minlength"].

A checkbox, radio, or switch — a real, keyboard-operable form input with a CSS-drawn visual that reacts to native :checked/:focus-visible (no JS).

<.toggle type="switch" field={@form[:dark]} label="Dark mode" />
<.toggle type="checkbox" name="tos" label="I agree" />

Checkboxes emit a hidden false companion so deselection is never dropped from phx-change params.

Attributes

• field (Phoenix.HTML.FormField) - Defaults to nil.
• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• type (:string) - Defaults to "checkbox". Must be one of "checkbox", "radio", or "switch".
• value (:string) - the value submitted when checked. Defaults to "true".
• checked (:boolean) - Defaults to nil.
• label (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "required"].