Components
Toggle group
Mutually exclusive choices with keyboard navigation and form values.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%= lc_toggle_group label: "View", value: "month" do %>
<%= lc_toggle_group_item "Week", value: "week" %>
<%= lc_toggle_group_item "Month", value: "month", selected: true %>
<%= lc_toggle_group_item "Year", value: "year" %>
<% end %>Examples
Mutually exclusive choices
<%= lc_toggle_group label: "View", value: "month" do %>
<%= lc_toggle_group_item "Week", value: "week" %>
<%= lc_toggle_group_item "Month", value: "month", selected: true %>
<%= lc_toggle_group_item "Year", value: "year" %>
<% end %>Navigation links
<%= lc_toggle_group label: "Period", as: :nav do %>
<%= lc_toggle_group_item "Month", href: "/components/toggle_group.html", current: true %>
<%= lc_toggle_group_item "Quarter", href: "/components/toggle.html" %>
<%= lc_toggle_group_item "Year", href: "/components/tabs.html" %>
<% end %>Wrapping pills
<%= lc_toggle_group label: "Category", name: "category", value: "", variant: :pills do %>
<%= lc_toggle_group_item "Leave unchanged", value: "" %>
<%= lc_toggle_group_item "Food", value: "food" %>
<%= lc_toggle_group_item "Transport", value: "transport" %>
<%= lc_toggle_group_item "Lodging", value: "lodging" %>
<% end %>Form values, native radios and reset
<form class="flex flex-col items-center gap-4">
<%= lc_toggle_group label: "Billing", name: "billing", value: "monthly" do %>
<%= lc_toggle_group_item "Monthly", value: "monthly" %>
<%= lc_toggle_group_item "Annual", value: "annual" %>
<%= lc_toggle_group_item "Custom", value: "custom", disabled: true %>
<% end %>
<%= lc_inline role: "radiogroup", aria: { label: "Heard about us" } do %>
<%= lc_toggle "A friend", name: "source", value: "friend", size: :sm %>
<%= lc_toggle "Search", name: "source", value: "search", size: :sm %>
<% end %>
<%= lc_button "Reset", type: :reset, variant: :ghost, size: :sm %>
</form>API reference
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_toggle_group
lc_toggle_group(label:, name: nil, value: nil, as: :div, variant: :segmented, size: :md, **attributes, &block)| Input | Default | Values |
|---|---|---|
| label | Required | Accessible name, visible where applicable |
| name | nil | — |
| value | nil | — |
| as | :div | — |
| variant | :segmented | — |
| size | :md | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_toggle_group_item
lc_toggle_group_item(label = nil, value: nil, selected: nil, checked: nil, href: nil, current: nil, input: {}, **attributes, &block)| Input | Default | Values |
|---|---|---|
| label | nil | Accessible name, visible where applicable |
| value | nil | — |
| selected | nil | — |
| checked | nil | — |
| href | nil | — |
| current | nil | — |
| input | {} | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
The examples also use lc_inline, lc_toggle, and lc_button. 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.