To render radio buttons within a regular form, use input/1 with the "radio-group" type instead.

Maturity: Developing

Usage

<.radio_group
  id="favorite-dog"
  name="favorite-dog"
  label="Favorite Dog"
  options={[
    {"Labrador Retriever", "labrador"},
    {"German Shepherd", "german_shepherd"},
    {"Golden Retriever", "golden_retriever"},
    {"French Bulldog", "french_bulldog"},
    {"Beagle", "beagle"}
  ]}
/>

CSS

To target the wrapper, you can use an attribute selector:

[role="radiogroup"] {}

Keyboard

• Left, Right, Up and Down - move between the radios and check the one the focus lands on.
• Space - check the focused radio.

The group is a single tab stop. The radios are native elements sharing a name, so the browser handles this.