Blocks

Switch

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

Usage

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

sui.switch

sui.switch checked: true

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

Enable notifications

div(class: "flex items-center gap-3") do
  sui.switch name: "notifications"
  sui.label "Enable notifications"
end

Marketing emails

div(class: "flex items-center gap-3") do
  sui.switch name: "marketing", checked: true
  sui.label "Marketing emails"
end

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

Small

sui.switch size: :sm

Default

sui.switch size: :default

Pass disabled: true to prevent interaction.

Disabled (off)

sui.switch disabled: true

Disabled (on)

sui.switch checked: true, disabled: true

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`