PineUiPhoenix.Components.RadioGroup (Pine UI v0.2.0)

Copy Markdown View Source

A group of mutually exclusive options, rendered as selectable cards.

A port of the Pines radio group.

<.radio_group name="plan" value={@plan}>
  <:option value="hobby" title="Hobby" description="Up to 3 projects" />
  <:option value="pro" title="Pro" description="Unlimited projects" />
</.radio_group>

Built on real <input type="radio"> elements, so arrow-key navigation, form submission and screen-reader semantics all come from the browser. No JavaScript at all.

Summary

Forms

radio_group(assigns)

Renders a card-style radio group.

Forms

radio_group(assigns)

Renders a card-style radio group.

Accessibility

The <fieldset>/<legend> pairing is what tells assistive technology these radios belong together and what the group is called — which is why the group label is a <legend> rather than a floating <div>.

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) (required)
  • value (:any) - The currently selected option's value. Defaults to nil.
  • label (:string) - Accessible name for the whole group. Defaults to nil.
  • hint (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • columns (:integer) - Grid columns at the sm breakpoint and up. Defaults to 1.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • option (required) - Accepts attributes:
    • value (:any) (required)
    • title (:string) (required)
    • description (:string)
    • disabled (:boolean)