Switch

A control for turning an option on or 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 switch --yes

The switch registry item installs these files:

app/components/ui_component.rb
app/components/ui/switch_component.rb
app/helpers/ui/switch_helper.rb
vendor/shadwire/shadwire.css

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

Usage

The component styles a native <input type="checkbox"> with role="switch". The sliding thumb is drawn by the .shadwire-switch utility.

<%= ui_switch(id: "airplane-mode") %>
<%= ui_label(for: "airplane-mode") { "Airplane mode" } %>

Or render the component Ui::SwitchComponent directly:

<%= render Ui::SwitchComponent.new(name: "settings[airplane]", checked: true) %>

Examples

Default

A native checkbox with role="switch", so screen readers announce it as a switch.

Airplane mode

<div class="flex items-center gap-2">
  <%= ui_switch(id: "switch-airplane") %>
  <%= ui_label(for: "switch-airplane") { "Airplane mode" } %>
</div>

On

Use checked: true to start it on; pair it with supporting text.

Notifications

Get notified about activity on your account.

<div class="flex items-start gap-2">
  <%= ui_switch(id: "switch-notifications", checked: true) %>
  <div class="grid gap-1">
    <%= ui_label(for: "switch-notifications") { "Notifications" } %>
    <p class="text-sm text-muted-foreground">Get notified about activity on your account.</p>
  </div>
</div>

Disabled

disabled: true disables the native input.

Unavailable

<div class="flex items-center gap-2">
  <%= ui_switch(id: "switch-disabled", disabled: true) %>
  <%= ui_label(for: "switch-disabled", class: "opacity-50") { "Unavailable" } %>
</div>

With form_with

Use form.field_name/form.field_id. There is no hidden input, so treat a missing parameter as off.

<%= form_with url: "#", scope: :settings do |form| %>
  <div class="flex items-center gap-2">
    <%= ui_switch(name: form.field_name(:marketing), id: form.field_id(:marketing), value: "1") %>
    <%= ui_label(for: form.field_id(:marketing)) { "Receive marketing emails" } %>
  </div>
<% end %>

API reference

ui_switch(**options) wraps Ui::SwitchComponent.new(**options).

Argument	Type	Default	Description
`checked`	Boolean	`false`	Renders the switch on.
`disabled`	Boolean	`false`	Disables the native input.
`class` / `class_name`	String	`nil`	Extra classes, merged after the base classes.
`**attrs`	Hash	`{}`	Free HTML attributes (`name`, `id`, `value`, `data:`, `aria:`, …).