Toggle Group

A group of toggles with single or multiple selection and arrow-key navigation.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add toggle-group --yes

The toggle-group registry item installs these files:

app/components/ui_component.rb
app/components/ui/toggle_group_component.rb
app/components/ui/toggle_group/item_component.rb
app/helpers/ui/toggle_group_helper.rb
app/javascript/controllers/ui_toggle_group_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_toggle_group(type: :single) do %>
  <%= ui_toggle_group_item(value: "left") { ui_icon("align-left") } %>
  <%= ui_toggle_group_item(value: "center") { ui_icon("align-center") } %>
<% end %>

Examples

Default

Multiple selection of text formatting.

<%= ui_toggle_group(type: :multiple, variant: :outline, "aria-label": "Formatting") do %>
  <%= ui_toggle_group_item(value: "bold", variant: :outline, "aria-label": "Bold") { ui_icon("bold") } %>
  <%= ui_toggle_group_item(value: "italic", variant: :outline, pressed: true, "aria-label": "Italic") { ui_icon("italic") } %>
  <%= ui_toggle_group_item(value: "underline", variant: :outline, "aria-label": "Underline") { ui_icon("underline") } %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`ToggleGroup`	`type`	`:single`	`:single` keeps at most one item pressed; `:multiple` lets each one toggle on its own.
`ToggleGroup`	`variant`	`:default`	Sets `data-variant`; `:outline` gives the group its shadow. Each item takes its own `variant:`.
`ToggleGroup`	`size`	`:default`	Sets `data-size`. Each item takes its own `size:`.
`ToggleGroup`	`orientation`	`:horizontal`	Lays the items out in a row (`:horizontal`) or a column (`:vertical`).
`ToggleGroup::Item`	`value`	`nil`	Identifies the item in the group's value.
`ToggleGroup::Item`	`variant`	`:default`	The look; give it the group's `variant:`. One of `:default`, `:outline`.
`ToggleGroup::Item`	`size`	`:default`	The size; give it the group's `size:`. One of `:default`, `:sm`, `:lg`.
`ToggleGroup::Item`	`pressed`	`false`	Starts pressed.
`ToggleGroup::Item`	`disabled`	`false`	Disables it: not clickable, and skipped by the keyboard.