shadcn-rails

Toggle

A two-state button that can be either on or off.

Stimulus: shadcn--toggle
toggle/default 
<%= render Shadcn::ToggleComponent.new(aria_label: "Toggle 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add toggle

Usage

<%= render Shadcn::ToggleComponent.new(aria_label: "Toggle 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

Examples

Default

<%= render Shadcn::ToggleComponent.new(aria_label: "Toggle 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

Outline

<%= render Shadcn::ToggleComponent.new(variant: :outline, aria_label: "Toggle 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

With Text

<%= render Shadcn::ToggleComponent.new(aria_label: "Toggle 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" class="mr-2"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
  Italic
<% end %>

Sizes

<div class="flex items-center gap-4">
  <%= render Shadcn::ToggleComponent.new(size: :sm, aria_label: "Toggle small") do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
  <% end %>
  <%= render Shadcn::ToggleComponent.new(size: :default, aria_label: "Toggle default") 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
  <% end %>
  <%= render Shadcn::ToggleComponent.new(size: :lg, aria_label: "Toggle large") do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
  <% end %>
</div>

Pressed (Default On)

Set pressed: true to render the toggle in its "on" state.

<%= render Shadcn::ToggleComponent.new(pressed: true, aria_label: "Toggle pressed") 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

Disabled

<%= render Shadcn::ToggleComponent.new(disabled: true, aria_label: "Toggle disabled") 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

All Variants

toggle/variants 
<%= render Shadcn::ToggleComponent.new(aria_label: "Toggle 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

Small Size

toggle/small 
<%= render Shadcn::Toggle.new(variant: :default, size: :sm, pressed: false, disabled: false, aria_label: "Toggle B") do %>
  B
<% end %>

Large Size

toggle/large 
<%= render Shadcn::Toggle.new(variant: :default, size: :lg, pressed: false, disabled: false, aria_label: "Toggle B") do %>
  B
<% end %>

Text Formatting

toggle/text_formatting 
<%= render Shadcn::Toggle.new(variant: :default, size: :default, pressed: false, disabled: false, aria_label: "Toggle B") do %>
  B
<% end %>

Text Alignment

toggle/text_alignment 
<%= render Shadcn::Toggle.new(variant: :outline, size: :default, pressed: false, disabled: false, aria_label: "Toggle Left") do %>
  Left
<% end %>

With Labels

toggle/with_labels 
<%= render Shadcn::ToggleComponent.new(aria_label: "Toggle 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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
<% end %>

Disabled State

toggle/disabled_state 
<%= render Shadcn::Toggle.new(variant: :default, size: :default, pressed: false, disabled: true, aria_label: "Toggle B") do %>
  B
<% end %>

Interactive Example

toggle/interactive 
<div class="flex flex-wrap gap-2">
  <%= render Shadcn::Toggle.new(aria_label: "Toggle bold") do %>
    B
  <% end %>

  <%= render Shadcn::Toggle.new(variant: :outline, pressed: true, aria_label: "Toggle italic") do %>
    I
  <% end %>
</div>

API Reference

API Reference

Prop Type Default Description
variant Symbol :default Visual style variant (:default, :outline)
size Symbol :default Size of the toggle (:sm, :default, :lg)
pressed Boolean false Initial pressed/on state
disabled Boolean false Whether the toggle is disabled
aria_label String nil Accessibility label for screen readers

Stimulus Controller

This component requires JavaScript. The Stimulus controller shadcn--toggle provides interactivity.

Handles toggle state changes and updates aria-pressed attribute.

Installation

Add to your config/importmap.rb:

pin "shadcn", to: "index.esm.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import ToggleController from "shadcn-rails-stimulus/controllers/toggle_controller"

application.register("shadcn--toggle", ToggleController)

Values

Name Type Default Description
pressed Boolean false Current pressed state

Actions

Action Description
toggle Toggles the pressed state

TypeScript

Type definitions are included. Import types as needed: 

import type { ToggleController } from "shadcn-rails-stimulus"

Accessibility

  • Uses button element with type="button"
  • Has aria-pressed attribute that reflects current state
  • Supports aria-label for accessible name
  • Uses data-state attribute for CSS styling ("on" or "off")
  • Disabled state uses native disabled attribute