Radio Group

A set of mutually exclusive options, built on native radios.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add radio-group --yes

The radio-group registry item installs these files:

app/components/ui_component.rb
app/components/ui/radio_group_component.rb
app/components/ui/radio_group/item_component.rb
app/helpers/ui/radio_group_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Items that share a name: form a group, and the browser handles single selection and arrow-key navigation. Label the group with aria: { label: }.

<%= ui_radio_group(aria: { label: "Plan" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "free", id: "plan-free", checked: true) %>
    <%= ui_label(for: "plan-free") { "Free" } %>
  </div>
<% end %>

Or render the components directly:

<%= render Ui::RadioGroupComponent.new do %>
  <%= render Ui::RadioGroup::ItemComponent.new(name: "plan", value: "free") %>
<% end %>

Composition

Each item is a native <input type="radio">; the name: is repeated on every item because ViewComponent injects no parent context.

RadioGroup
`-- RadioGroup::Item (one per option, same name:)

Examples

Default

Native radios that share one name:, so the browser handles arrow-key navigation.

Default

Comfortable

Compact

<%= ui_radio_group(aria: { label: "Interface density" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "default", id: "density-default", checked: true) %>
    <%= ui_label(for: "density-default") { "Default" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "comfortable", id: "density-comfortable") %>
    <%= ui_label(for: "density-comfortable") { "Comfortable" } %>

<%= ui_radio_group(aria: { label: "Interface density" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "default", id: "density-default", checked: true) %>
    <%= ui_label(for: "density-default") { "Default" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "comfortable", id: "density-comfortable") %>
    <%= ui_label(for: "density-comfortable") { "Comfortable" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "compact", id: "density-compact") %>
    <%= ui_label(for: "density-compact") { "Compact" } %>
  </div>
<% end %>

Disabled item

disabled: true disables one item without affecting the group.

Free

Enterprise (coming soon)

<%= ui_radio_group(aria: { label: "Plan" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "free", id: "plan-free", checked: true) %>
    <%= ui_label(for: "plan-free") { "Free" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "enterprise", id: "plan-enterprise", disabled: true) %>
    <%= ui_label(for: "plan-enterprise", class: "opacity-50") { "Enterprise (coming soon)" } %>

<%= ui_radio_group(aria: { label: "Plan" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "free", id: "plan-free", checked: true) %>
    <%= ui_label(for: "plan-free") { "Free" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "enterprise", id: "plan-enterprise", disabled: true) %>
    <%= ui_label(for: "plan-enterprise", class: "opacity-50") { "Enterprise (coming soon)" } %>
  </div>
<% end %>

With form_with

Use form.field_name for the shared name and form.field_id(attr, value) for each id.

<%= form_with url: "#", scope: :subscription do |form| %>
  <%= ui_radio_group(aria: { label: "Billing cycle" }) do %>
    <div class="flex items-center gap-2">
      <%= ui_radio_group_item(
            name: form.field_name(:cycle),
            value: "monthly",
            id: form.field_id(:cycle, "monthly"),
            checked: true

<%= form_with url: "#", scope: :subscription do |form| %>
  <%= ui_radio_group(aria: { label: "Billing cycle" }) do %>
    <div class="flex items-center gap-2">
      <%= ui_radio_group_item(
            name: form.field_name(:cycle),
            value: "monthly",
            id: form.field_id(:cycle, "monthly"),
            checked: true
          ) %>
      <%= ui_label(for: form.field_id(:cycle, "monthly")) { "Monthly" } %>
    </div>
    <div class="flex items-center gap-2">
      <%= ui_radio_group_item(
            name: form.field_name(:cycle),
            value: "yearly",
            id: form.field_id(:cycle, "yearly")
          ) %>
      <%= ui_label(for: form.field_id(:cycle, "yearly")) { "Yearly" } %>
    </div>
  <% end %>
<% end %>

API reference

ui_radio_group(**options, &block) and ui_radio_group_item(**options) wrap the matching components.

Component	Argument	Default	Description
`RadioGroup`	`class` / `class_name`, `**attrs`	—	The `role="radiogroup"` container; label it with `aria: { label: }`.
`RadioGroup::Item`	`name:` (required)	—	The name shared by the group's radios.
`RadioGroup::Item`	`value:` (required)	—	The value submitted when the item is selected.
`RadioGroup::Item`	`checked` / `disabled`	`false`	The native input's initial state.
`RadioGroup::Item`	`**attrs`	`{}`	Free HTML attributes (`id`, `data:`, `aria:`, …).