shadcn-rails

Toggle

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

Stimulus: shadcn--toggle

Installation

Add the component to your project:

rails generate shadcn:component 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

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

<%= 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 %>

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

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 docs provides interactivity.

Handles toggle state changes and updates aria-pressed attribute.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

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

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

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

Or import just this controller:

import DocsController from "shadcn-rails/controllers/docs_controller"

application.register("docs", DocsController)

Values

Name Type Default Description
pressed Boolean Current pressed state

Actions

Action Description
toggle Toggles the pressed state

TypeScript

Type definitions are included. Import types as needed: 

import type { DocsController } from "shadcn-rails"

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