Components
Collapsible
Content that expands in place.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%= lc_collapsible class: "w-full", title: "Can I use my own colors?" do %>
<p class="text-sm text-muted-foreground">Yes. Override the default theme values in your application stylesheet.</p>
<% end %>Examples
Expandable content
Can I use my own colors?
Yes. Override the default theme values in your application stylesheet.
<%= lc_collapsible class: "w-full", title: "Can I use my own colors?" do %>
<p class="text-sm text-muted-foreground">Yes. Override the default theme values in your application stylesheet.</p>
<% end %>Row summary with a chevron
Language English
<%= lc_collapsible card: false, indicator: :chevron, class: "w-full max-w-80", summary_class: "rounded-2xl px-3 font-medium hover:bg-accent" do |collapsible| %>
<% collapsible.summary do %>
<span class="me-auto">Language</span>
<span class="font-normal text-muted-foreground">English</span>
<% end %>
<%= lc_toggle_group label: "Language", value: "en" do %>
<%= lc_toggle_group_item "English", value: "en", selected: true %>
<%= lc_toggle_group_item "日本語", value: "ja" %>
<% end %>
<% end %>Button summary
Invite people
<%= lc_collapsible card: false, button: { variant: :secondary, size: :sm }, summary_class: "w-fit", class: "w-full max-w-80" do |collapsible| %>
<% collapsible.summary do %>
<%= lc_icon "user-plus", options: { "aria-hidden": true } %>
<span>Invite people</span>
<% end %>
<%= lc_field label: "Email", id: "example-2-email" do |field| %>
<%= lc_input name: "email", type: :email, **field %>
<% 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_collapsible
lc_collapsible(title: nil, open: false, card: true, summary_class: nil, indicator: :marker, button: nil, **attributes, &block)| Input | Default | Values |
|---|---|---|
| title | nil | — |
| open | false | true · false |
| card | true | true · false |
| summary_class | nil | — |
| indicator | :marker | — |
| button | nil | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
The examples also use lc_toggle_group, lc_toggle_group_item, lc_icon, lc_field, and lc_input. 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.