Components
List group
Grouped rows of settings, with a heading and footnote.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%= lc_list_section "Sign-in methods", id: "my-component", footnote: "Keep at least one way to sign in.", class: "w-full max-w-md" do %>
<%= lc_list_group do %>
<%= lc_list_row "Email", subtitle: "ada@example.com", icon: "envelope" do %>
<%= lc_button "Change", variant: :secondary, size: :sm %>
<% end %>
<%= lc_list_row "Passkey", subtitle: "Not set up", icon: "key" do %>
<%= lc_button "Add", variant: :secondary, size: :sm %>
<% end %>
<%= lc_list_row "Sign-in alerts", subtitle: "Email me when a new device signs in", icon: "bell", tag: :label, class: "cursor-pointer" do %>
<input type="checkbox" role="switch" name="alerts" class="<%= lc_switch_class %>" checked>
<% end %>
<%= lc_list_row "Recovery codes", icon: "document-text", href: "#recovery-codes" do %>
<%= lc_icon "chevron-right", variant: :mini, options: { class: "size-5 text-muted-foreground rtl:rotate-180", "aria-hidden": true } %>
<% end %>
<%= lc_list_row padded: false do %>
<%= lc_list_item "Delete account", icon: "trash", tag: :button, type: "button", class: "w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent" %>
<% end %>
<% end %>
<% end %>Examples
Settings
<%= lc_list_section "Sign-in methods", id: "example-0", footnote: "Keep at least one way to sign in.", class: "w-full max-w-md" do %>
<%= lc_list_group do %>
<%= lc_list_row "Email", subtitle: "ada@example.com", icon: "envelope" do %>
<%= lc_button "Change", variant: :secondary, size: :sm %>
<% end %>
<%= lc_list_row "Passkey", subtitle: "Not set up", icon: "key" do %>
<%= lc_button "Add", variant: :secondary, size: :sm %>
<% end %>
<%= lc_list_row "Sign-in alerts", subtitle: "Email me when a new device signs in", icon: "bell", tag: :label, class: "cursor-pointer" do %>
<input type="checkbox" role="switch" name="alerts" class="<%= lc_switch_class %>" checked>
<% end %>
<%= lc_list_row "Recovery codes", icon: "document-text", href: "#recovery-codes" do %>
<%= lc_icon "chevron-right", variant: :mini, options: { class: "size-5 text-muted-foreground rtl:rotate-180", "aria-hidden": true } %>
<% end %>
<%= lc_list_row padded: false do %>
<%= lc_list_item "Delete account", icon: "trash", tag: :button, type: "button", class: "w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent" %>
<% end %>
<% end %>
<% end %>Form rows
<%= lc_list_group class: "w-full max-w-md" do %>
<%= lc_list_field "Description", icon: "pencil", id: "example-1-description" do %>
<%= lc_input plain: true, id: "example-1-description", name: "description", placeholder: "Dinner at Ichiran" %>
<% end %>
<%= lc_list_field "Paid by", icon: "user", tag: :fieldset do %>
<div class="flex flex-wrap items-center gap-related min-w-0">
<%= lc_toggle "Ada", size: :sm, active: true %>
<%= lc_toggle "Grace", size: :sm %>
</div>
<% end %>
<%= lc_list_field "Date", icon: "calendar", id: "example-1-date" do %>
<%= lc_input type: :date, plain: true, id: "example-1-date", name: "date", value: "2026-11-06" %>
<% end %>
<% end %>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_list_section
lc_list_section(heading, footnote: nil, level: 2, **attributes, &block)| Input | Default | Values |
|---|---|---|
| heading | Required | — |
| footnote | nil | — |
| level | 2 | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_list_group
lc_list_group(tag: :div, **attributes, &block)| Input | Default | Values |
|---|---|---|
| tag | :div | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_list_row
lc_list_row(title = nil, subtitle: nil, icon: nil, href: nil, tag: nil, padded: true, **attributes, &block)| Input | Default | Values |
|---|---|---|
| title | nil | — |
| subtitle | nil | — |
| icon | nil | Heroicon name; spacing is handled automatically |
| href | nil | — |
| tag | nil | — |
| padded | true | true · false |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_list_item
lc_list_item(title, subtitle: nil, icon: nil, tag: :div, **attributes, &block)| Input | Default | Values |
|---|---|---|
| title | Required | — |
| subtitle | nil | — |
| icon | nil | Heroicon name; spacing is handled automatically |
| tag | :div | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_list_field
lc_list_field(label, icon: nil, id: nil, tag: :div, surface: true, **attributes, &block)| Input | Default | Values |
|---|---|---|
| label | Required | Accessible name, visible where applicable |
| icon | nil | Heroicon name; spacing is handled automatically |
| id | nil | — |
| tag | :div | — |
| surface | true | true · false |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
The examples also use lc_button, lc_icon, lc_input, and lc_toggle. 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.