Toggle Group
A set of two-state buttons that can be toggled on or off, supporting single or multiple selection.
Examples
Default
A set of two-state buttons that can be toggled on or off.
<%= render "ui/toggle_group", type: "single", variant: "outline" do %>
<%= render "ui/toggle_group/item", value: "left" do %>Left<% end %>
<%= render "ui/toggle_group/item", value: "center" do %>Center<% end %>
<%= render "ui/toggle_group/item", value: "right" do %>Right<% end %>
<% end %><%= render UI::ToggleGroup.new(type: "single", variant: "outline") do %>
<%= render UI::ToggleGroupItem.new(value: "left") { "Left" } %>
<%= render UI::ToggleGroupItem.new(value: "center") { "Center" } %>
<%= render UI::ToggleGroupItem.new(value: "right") { "Right" } %>
<% end %><%= render UI::ToggleGroupComponent.new(type: "single", variant: "outline") do %>
<%= render(UI::ToggleGroupItemComponent.new(value: "left")) { "Left" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "center")) { "Center" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "right")) { "Right" } %>
<% end %>Multiple Selection
Multiple items can be selected simultaneously.
<%= render "ui/toggle_group", type: "multiple", variant: "outline" do %>
<%= render "ui/toggle_group/item", value: "bold" do %>B<% end %>
<%= render "ui/toggle_group/item", value: "italic" do %>I<% end %>
<%= render "ui/toggle_group/item", value: "underline" do %>U<% end %>
<% end %><%= render UI::ToggleGroup.new(type: "multiple", variant: "outline") do %>
<%= render UI::ToggleGroupItem.new(value: "bold") { "B" } %>
<%= render UI::ToggleGroupItem.new(value: "italic") { "I" } %>
<%= render UI::ToggleGroupItem.new(value: "underline") { "U" } %>
<% end %><%= render UI::ToggleGroupComponent.new(type: "multiple", variant: "outline") do %>
<%= render(UI::ToggleGroupItemComponent.new(value: "bold")) { "B" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "italic")) { "I" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "underline")) { "U" } %>
<% end %>Outline
Toggle group with outline variant.
<%= render "ui/toggle_group", type: "single", variant: "outline" do %>
<%= render "ui/toggle_group/item", value: "bold" do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 18h12"/><path d="M6 6h12"/></svg>
<% end %>
<%= render "ui/toggle_group/item", value: "italic" do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h8"/><path d="M8 18h8"/><path d="M12 6v12"/></svg>
<% end %>
<%= render "ui/toggle_group/item", value: "underline" do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6h-12"/><path d="M17 18h-12"/><path d="M3 12h18"/></svg>
<% end %>
<% end %><%= render UI::ToggleGroup.new(type: "single", variant: "outline") do %>
<%= render UI::ToggleGroupItem.new(value: "bold") do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 18h12"/><path d="M6 6h12"/></svg>
<% end %>
<%= render UI::ToggleGroupItem.new(value: "italic") do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h8"/><path d="M8 18h8"/><path d="M12 6v12"/></svg>
<% end %>
<%= render UI::ToggleGroupItem.new(value: "underline") do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6h-12"/><path d="M17 18h-12"/><path d="M3 12h18"/></svg>
<% end %>
<% end %><%= render UI::ToggleGroupComponent.new(type: "single", variant: "outline") do %>
<%= render(UI::ToggleGroupItemComponent.new(value: "bold")) do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 18h12"/><path d="M6 6h12"/></svg>
<% end %>
<%= render(UI::ToggleGroupItemComponent.new(value: "italic")) do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h8"/><path d="M8 18h8"/><path d="M12 6v12"/></svg>
<% end %>
<%= render(UI::ToggleGroupItemComponent.new(value: "underline")) do %>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6h-12"/><path d="M17 18h-12"/><path d="M3 12h18"/></svg>
<% end %>
<% end %>Small
A small toggle group.
<%= render "ui/toggle_group", type: "single", variant: "outline", size: "sm" do %>
<%= render "ui/toggle_group/item", value: "bold" do %>B<% end %>
<%= render "ui/toggle_group/item", value: "italic" do %>I<% end %>
<%= render "ui/toggle_group/item", value: "underline" do %>U<% end %>
<% end %><%= render UI::ToggleGroup.new(type: "single", variant: "outline", size: "sm") do %>
<%= render UI::ToggleGroupItem.new(value: "bold") { "B" } %>
<%= render UI::ToggleGroupItem.new(value: "italic") { "I" } %>
<%= render UI::ToggleGroupItem.new(value: "underline") { "U" } %>
<% end %><%= render UI::ToggleGroupComponent.new(type: "single", variant: "outline", size: "sm") do %>
<%= render(UI::ToggleGroupItemComponent.new(value: "bold")) { "B" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "italic")) { "I" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "underline")) { "U" } %>
<% end %>Large
A large toggle group.
<%= render "ui/toggle_group", type: "single", variant: "outline", size: "lg" do %>
<%= render "ui/toggle_group/item", value: "bold" do %>B<% end %>
<%= render "ui/toggle_group/item", value: "italic" do %>I<% end %>
<%= render "ui/toggle_group/item", value: "underline" do %>U<% end %>
<% end %><%= render UI::ToggleGroup.new(type: "single", variant: "outline", size: "lg") do %>
<%= render UI::ToggleGroupItem.new(value: "bold") { "B" } %>
<%= render UI::ToggleGroupItem.new(value: "italic") { "I" } %>
<%= render UI::ToggleGroupItem.new(value: "underline") { "U" } %>
<% end %><%= render UI::ToggleGroupComponent.new(type: "single", variant: "outline", size: "lg") do %>
<%= render(UI::ToggleGroupItemComponent.new(value: "bold")) { "B" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "italic")) { "I" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "underline")) { "U" } %>
<% end %>Disabled
A disabled toggle group.
<%= render "ui/toggle_group", type: "single", variant: "outline", disabled: true do %>
<%= render "ui/toggle_group/item", value: "bold" do %>B<% end %>
<%= render "ui/toggle_group/item", value: "italic" do %>I<% end %>
<%= render "ui/toggle_group/item", value: "underline" do %>U<% end %>
<% end %><%= render UI::ToggleGroup.new(type: "single", variant: "outline", disabled: true) do %>
<%= render UI::ToggleGroupItem.new(value: "bold") { "B" } %>
<%= render UI::ToggleGroupItem.new(value: "italic") { "I" } %>
<%= render UI::ToggleGroupItem.new(value: "underline") { "U" } %>
<% end %><%= render UI::ToggleGroupComponent.new(type: "single", variant: "outline", disabled: true) do %>
<%= render(UI::ToggleGroupItemComponent.new(value: "bold")) { "B" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "italic")) { "I" } %>
<%= render(UI::ToggleGroupItemComponent.new(value: "underline")) { "U" } %>
<% end %>Features
- Custom styling with Tailwind classes
- Single or multiple selection modes
- Variant styles (default, outline)
- Multiple sizes (sm, default, lg)
- Spacing control between items
- Disabled state support
- ARIA attributes for accessibility
API Reference
Toggle Group
A container that groups related toggle items together with consistent styling.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| type | String | single | Selection mode (single or multiple) |
| value | String | Array | nil | Initial selected value(s) |
| variant | String | default | Visual style variant (default or outline) |
| orientation | Symbol | :horizontal | Orientation of the group (horizontal or vertical) |
| spacing | Integer | 0 | Gap spacing between items (0, 1, 2, etc.) |
Data Attributes
| Attribute | Values | Description |
|---|---|---|
| data-controller | Stimulus controller for toggle group behavior | |
| data-orientation | The current orientation of the group | |
| data-spacing | Spacing between items | |
| data-variant | Visual style variant |
Item
An individual toggle button within the group.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| value | String | nil | The value associated with this item |
| pressed | Boolean | false | Whether the item is currently pressed/selected |
| disabled | Boolean | false | Whether the item is disabled |
| size | String | default | Size of the item (sm, default, lg) |
Data Attributes
| Attribute | Values | Description |
|---|---|---|
| data-state | Current pressed state of the item | |
| data-value | The value of this item | |
| data-disabled | Present when item is disabled |
Accessibility
Adheres to theCheckbox Group / Radio Group WAI-ARIA design pattern
Uses role="radiogroup" for single selection or role="group" for multiple selection, with appropriate aria-checked/aria-pressed states.