AuroraUI.Components.Choices (Aurora UI v0.1.1)

View Source

Choices family — checkbox, radio group, switch, and segmented control.

Every control in this family is a real native form control styled with appearance: none, so keyboard behavior, form participation, and assistive technology semantics come from the platform rather than from JavaScript. The visual box/thumb/segment is drawn with tokens and CSS sibling selectors keyed off the input's native :checked/:disabled state — no hook is required for any of these components.

Accessibility

  • checkbox/1 exposes checked, disabled, invalid, and a tri-state indeterminate. Because a checkbox's indeterminate is a DOM property (not an attribute) it cannot be set from server-rendered HTML; Aurora renders aria-checked="mixed" and a visual dash so the mixed state is announced and drawn immediately. Set the matching input.indeterminate = true property client-side when you also need the native pseudo-class.
  • radio_group/1 renders a fieldset/legend with role="radiogroup"; the child radio/1 controls share a name, so native roving arrow-key navigation and single-selection come for free.
  • switch/1 is a checkbox with role="switch"; its checked state maps to on/off and is announced natively.
  • segmented_control/1 is a radiogroup of exclusive radios styled as a single cluster; arrow keys move selection natively.

All animated affordances (the check draw, the switch thumb) collapse to an instant state change under prefers-reduced-motion: reduce.

Summary

Functions

checkbox(assigns)

A single native checkbox with a generous 44px hit area, label, and optional description.

radio(assigns)

A single radio option. Usually rendered by radio_group/1; use it directly only when you need a bespoke group layout, remembering to give each radio the same name.

radio_group(assigns)

A labelled group of mutually exclusive radios. Pass options for the common case, or render <.radio> children yourself for full control.

segmented_control(assigns)

A compact set of exclusive options rendered as a single segmented cluster. Backed by native radios, so arrow keys move the selection and it participates in forms. Use for 2–5 short, peer options (a view toggle, a density switch); reach for radio_group/1 when options need descriptions or wrap.

switch(assigns)

A toggle switch built on a native checkbox with role="switch". The thumb animates between states and snaps instantly under reduced-motion. Use for an instantly-applied on/off setting; use checkbox/1 when the value is only committed on form submit.

Functions

checkbox(assigns)

A single native checkbox with a generous 44px hit area, label, and optional description.

Use for an independent boolean. For one-of-many, reach for radio_group/1; for an instant-effect setting, switch/1.

Examples

<.checkbox name="terms" checked={@accepted}>I accept the terms</.checkbox>

<.checkbox name="all" indeterminate={@some_selected}>
  Select all
  <:description>Toggles every row in the table</:description>
</.checkbox>

Attributes

  • id (:string) - stable id; generated when omitted. Defaults to nil.
  • name (:string) - Defaults to nil.
  • value (:string) - submitted value when checked. Defaults to "true".
  • checked (:boolean) - Defaults to false.
  • indeterminate (:boolean) - renders aria-checked=mixed + a dash. Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • invalid (:boolean) - sets aria-invalid and error styling. Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["form", "required", "phx-change", "phx-click", "phx-value-id", "phx-blur", "phx-focus"].

Slots

  • inner_block - the checkbox label.
  • description - optional helper text, wired as aria-describedby.

radio(assigns)

A single radio option. Usually rendered by radio_group/1; use it directly only when you need a bespoke group layout, remembering to give each radio the same name.

Examples

<.radio name="plan" value="pro" checked>Pro</.radio>

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • value (:string) (required)
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • description (:string) - per-option helper text. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-click", "phx-value-id"].

Slots

  • inner_block (required) - the option label.

radio_group(assigns)

A labelled group of mutually exclusive radios. Pass options for the common case, or render <.radio> children yourself for full control.

Examples

<.radio_group label="Plan" name="plan" value={@plan} options={[
  {"Free", "free"},
  %{label: "Pro", value: "pro", description: "Everything in Free, plus…"}
]} />

Attributes

  • label (:string) - group name, rendered as the <legend>. Defaults to nil.
  • name (:string) - shared radio name; required when using options. Defaults to nil.
  • value (:string) - the selected option value. Defaults to nil.
  • description (:string) - helper text wired as aria-describedby. Defaults to nil.
  • disabled (:boolean) - disables the whole group via the fieldset. Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • id (:string) - Defaults to nil.
  • options (:list) - {label, value} tuples or maps with :label/:value/:description/:disabled. Defaults to [].
  • Global attributes are accepted.

Slots

  • inner_block - manual <.radio> children, used instead of options.

segmented_control(assigns)

A compact set of exclusive options rendered as a single segmented cluster. Backed by native radios, so arrow keys move the selection and it participates in forms. Use for 2–5 short, peer options (a view toggle, a density switch); reach for radio_group/1 when options need descriptions or wrap.

Examples

<.segmented_control name="view" value={@view} label="View" options={[
  {"List", "list"}, {"Grid", "grid"}, {"Board", "board"}
]} />

Attributes

  • name (:string) (required) - shared radio name for the cluster.
  • value (:string) - the selected option value. Defaults to nil.
  • label (:string) - accessible name for the radiogroup. Defaults to nil.
  • options (:list) (required) - {label, value} tuples or maps with :label/:value/:disabled.
  • disabled (:boolean) - disables every segment. Defaults to false.
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • Global attributes are accepted.

switch(assigns)

A toggle switch built on a native checkbox with role="switch". The thumb animates between states and snaps instantly under reduced-motion. Use for an instantly-applied on/off setting; use checkbox/1 when the value is only committed on form submit.

Examples

<.switch name="notify" checked={@notify} phx-change="toggle">
  Email notifications
</.switch>

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • value (:string) - Defaults to "true".
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • label_on (:string) - short on-state text drawn inside the track. Defaults to nil.
  • label_off (:string) - short off-state text drawn inside the track. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form", "required", "phx-change", "phx-click", "phx-value-id", "phx-blur", "phx-focus"].

Slots

  • inner_block - the switch label.
  • description