SutraUI.RadioGroup (Sutra UI v0.2.0)

View Source

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Provides two components:

  • radio_group/1 - A complete group with label, radios, and error handling
  • radio/1 - A single radio button for custom layouts

Accessibility

  • Uses semantic <fieldset> and role="radiogroup" for proper grouping
  • Individual radio buttons use <input type="radio">
  • Supports aria-invalid for error states
  • Supports aria-describedby for error messages
  • Proper label associations via for and id attributes
  • Keyboard accessible (Arrow keys to navigate, Space to select)

Summary

Functions

radio(assigns)

Renders a single radio input for custom layouts.

radio_group(assigns)

Renders a radio group with label and multiple radio options.

Functions

radio(assigns)

Renders a single radio input for custom layouts.

Use this when you need more control over the layout of radio buttons.

Examples

# Basic radio
<.radio name="agree" value="yes" label="I agree to the terms" />

# Checked radio
<.radio name="remember" value="true" label="Remember me" checked />

# Disabled radio
<.radio name="option" value="1" label="Option 1" disabled />

# With description
<.radio name="notify" value="email" label="Email notifications">
  Receive daily digest emails
</.radio>

# With errors
<.radio name="plan" value="pro" label="Pro Plan" errors={["Required"]}>
  $29/month
</.radio>

Attributes

  • name (:string) (required) - The name attribute for the radio input.
  • value (:string) (required) - The value of the radio input.
  • label (:string) (required) - The label text for the radio button.
  • id (:string) - The ID for the input element. Defaults to nil.
  • checked (:boolean) - Whether the radio is checked. Defaults to false.
  • disabled (:boolean) - Whether the radio is disabled. Defaults to false.
  • errors (:list) - List of error messages. Defaults to [].
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["required", "form", "aria-describedby"].

Slots

  • inner_block - Optional description content.

radio_group(assigns)

Renders a radio group with label and multiple radio options.

Examples

# Basic radio group
<.radio_group name="theme" label="Choose your theme">
  <:radio value="light" label="Light" />
  <:radio value="dark" label="Dark" checked />
  <:radio value="auto" label="Auto" />
</.radio_group>

# Required radio group
<.radio_group name="size" label="Select size" required>
  <:radio value="small" label="Small" />
  <:radio value="medium" label="Medium" />
  <:radio value="large" label="Large" />
</.radio_group>

# With errors
<.radio_group name="plan" label="Select plan" errors={["Please select a plan"]}>
  <:radio value="free" label="Free" />
  <:radio value="pro" label="Pro" />
</.radio_group>

# Disabled group
<.radio_group name="option" label="Choose option" disabled>
  <:radio value="a" label="Option A" />
  <:radio value="b" label="Option B" />
</.radio_group>

# Radio with description
<.radio_group name="notify" label="Notifications">
  <:radio value="all" label="All">Receive all notifications</:radio>
  <:radio value="important" label="Important only">Only critical alerts</:radio>
</.radio_group>

Attributes

  • name (:string) (required) - The name attribute for all radio inputs in the group.
  • label (:string) - The label for the radio group. Defaults to nil.
  • id (:string) - The ID for the fieldset element. Defaults to nil.
  • errors (:list) - List of error messages. Defaults to [].
  • required (:boolean) - Whether the radio group is required. Defaults to false.
  • disabled (:boolean) - Whether all radio inputs are disabled. Defaults to false.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes for the fieldset. Supports all globals plus: ["aria-describedby"].

Slots

  • radio (required) - Radio button items. Accepts attributes:
    • value (:string) (required) - The value of the radio input.
    • label (:string) (required) - The label text for the radio button.
    • checked (:boolean) - Whether this radio is checked.
    • disabled (:boolean) - Whether this specific radio is disabled.
    • id (:string) - Custom ID for this radio input.