Toggle

A two-state button with aria-pressed and data-state (on/off).

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 --yes

The toggle registry item installs these files:

app/components/ui_component.rb
app/components/ui/toggle_component.rb
app/helpers/ui/toggle_helper.rb
app/javascript/controllers/ui_toggle_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(variant: :outline, "aria-label": "Bold") { ui_icon("bold") } %>

Examples

Default

Formatting toggles, one of them pressed.

<div class="flex items-center gap-2">
  <%= ui_toggle(variant: :outline, "aria-label": "Bold") { ui_icon("bold") } %>
  <%= ui_toggle(variant: :outline, pressed: true, "aria-label": "Italic") { ui_icon("italic") } %>
</div>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Toggle`	`variant`	`:default`	The look. One of `:default`, `:outline`.
`Toggle`	`size`	`:default`	The size. One of `:default`, `:sm`, `:lg`.
`Toggle`	`pressed`	`false`	Starts pressed (`aria-pressed="true"`).
`Toggle`	`disabled`	`false`	Disables it: not clickable, and skipped by the keyboard.