Blocks

Radio Group

Styled native radio buttons grouped by name. No JS — standard browser semantics.

Installation

bin/rails g shadcnrb:component radio_group

Usage

Hobby ($0/mo)

Pro ($19/mo)

Team ($49/mo)

<%= sui.radio_group do |rg| %>
  <%= sui.layout.row gap: 2 do %>
    <%= rg.item name: "plan", value: "hobby", id: "plan-hobby" %>
    <%= sui.label "Hobby ($0/mo)", for: "plan-hobby" %>
  <% end %>
  <%= sui.layout.row gap: 2 do %>
    <%= rg.item name: "plan", value: "pro", id: "plan-pro", checked: true %>
    <%= sui.label "Pro ($19/mo)", for: "plan-pro" %>
  <% end %>
  <%= sui.layout.row gap: 2 do %>
    <%= rg.item name: "plan", value: "team", id: "plan-team" %>
    <%= sui.label "Team ($49/mo)", for: "plan-team" %>
  <% end %>
<% end %>