Skip to content
Components

Radio

One choice from a short list.

After the one-time setup, call the helper directly from ERB. No component import is needed.

<%= lc_choice_group legend: "Plan", hint: "You can change plans at any time." do %>
  <%= lc_radio "Free", name: "plan", value: "free", checked: true %>
  <%= lc_radio "Team", name: "plan", value: "team", hint: "Shared projects and roles." %>
  <%= lc_radio "Enterprise", name: "plan", value: "enterprise" %>
<% end %>
<%= lc_choice_group legend: "Plan", hint: "You can change plans at any time." do %>
  <%= lc_radio "Free", name: "plan", value: "free", checked: true %>
  <%= lc_radio "Team", name: "plan", value: "team", hint: "Shared projects and roles." %>
  <%= lc_radio "Enterprise", name: "plan", value: "enterprise" %>
<% end %>
<%= lc_choice_group legend: "Plan", class: "w-full max-w-md" do %>
  <%= lc_radio "Free", name: "example-1-plan", value: "free", hint: "Up to 3 projects.", card: true %>
  <%= lc_radio "Team", name: "example-1-plan", value: "team", hint: "Shared projects and roles.", card: true, checked: true do %>
    <%= lc_text "$12 per member, per month", size: :caption, tone: :muted %>
  <% end %>
  <%= lc_radio "Enterprise", name: "example-1-plan", value: "enterprise", hint: "SSO and audit logs.", card: true %>
<% end %>

Helpers render semantic HTML and include their interaction wiring. Pass native attributes through class:, data:, aria: and the usual Rails options. Blocks use captured ERB content.

lc_radio

lc_radio(label, name:, value:, checked: false, hint: nil, card: false, **attributes, &block)
InputDefaultValues
labelRequiredAccessible name, visible where applicable
nameRequired—
valueRequired—
checkedfalsetrue · false
hintnil—
cardfalsetrue · false
attributes{}Native HTML attributes; class:, data: and aria: merge with defaults
blockCaptured blockCaptured Rails ERB content

lc_choice_group

lc_choice_group(legend:, **options, &block)
InputDefaultValues
legendRequired—
options{}—
blockCaptured blockCaptured Rails ERB content

The examples also use lc_text. Each is documented on its own page.

Styling and extension

Use class: to merge utilities, native attributes for application behavior, and the theming guide for the shared palette. For custom markup, the advanced class helpers expose the same styles, including glass surfaces and class merging.

API JSON · LLM reference