Blocks

Switch

A toggle control for binary on/off state — renders as a styled button[role=switch] with optional hidden inputs for form submission.

Installation

bin/rails g shadcnrb:component switch

Usage

Call sui.switch with no arguments for a standalone toggle.

<!-- default (off) -->
<%= sui.switch %>
<!-- checked: true -->
<%= sui.switch checked: true %>

With label

Pair the switch with sui.label inside a flex container.

Enable notifications

Marketing emails

<!-- default (off) -->
<div class="flex items-center gap-3">
  <%= sui.switch name: "notifications" %>
  <%= sui.label "Enable notifications" %>
</div>
<!-- checked: true -->
<div class="flex items-center gap-3">
  <%= sui.switch name: "marketing", checked: true %>
  <%= sui.label "Marketing emails" %>
</div>

Sizes

Use size: to choose between :sm and :default.

Small

Default

<!-- size: :sm -->
<div class="flex items-center gap-3">
  <%= sui.switch size: :sm %>
  <%= sui.label "Small" %>
</div>
<!-- size: :default -->
<div class="flex items-center gap-3">
  <%= sui.switch size: :default %>
  <%= sui.label "Default" %>
</div>

Disabled

Pass disabled: true to prevent interaction.

Disabled (off)

Disabled (on)

<!-- disabled (off) -->
<div class="flex items-center gap-3">
  <%= sui.switch disabled: true %>
  <%= sui.label "Disabled (off)" %>
</div>
<!-- checked: true, disabled: true -->
<div class="flex items-center gap-3">
  <%= sui.switch checked: true, disabled: true %>
  <%= sui.label "Disabled (on)" %>
</div>

API

Prop	Type	Default	Description
`name`	String	`nil`	Form field name; enables hidden inputs for form submission when set
`checked`	Boolean	`false`	Initial checked state of the switch
`value`	String	`"1"`	Value submitted when the switch is on
`unchecked_value`	String	`"0"`	Value always submitted via hidden input when switch is off
`include_hidden`	Boolean	`true`	Whether to render hidden inputs for form submission (requires `name`)
`disabled`	Boolean	`false`	Disables interaction and applies reduced-opacity styling
`size`	Symbol	`:default`	Toggle size — `:default` or `:sm`