Switch

A toggle switch that includes a real hidden <input type="checkbox">, so it submits with a Rails form like any other field.

Email notifications

<label
  data-controller="zag-switch"
  data-part="root"
  data-zag-switch-name-value="notifications"
  class="flex cursor-pointer items-center gap-3"
>
  <input data-part="hidden-input" class="sr-only" />
  <span
    data-part="control"
    class="bg-muted data-[state=checked]:bg-primary relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors"
  >
    <span
      data-part="thumb"
      class="bg-popover inline-block h-5 w-5 translate-x-0.5 rounded-full shadow transition-transform data-[state=checked]:translate-x-5"
    ></span>
  </span>
  <span data-part="label" class="text-sm font-medium">Email notifications</span>
</label>

Parts

root, control, thumb, label, hidden-input.

Values

Attribute	Type	Default	Description
data-zag-switch-checked-value	Boolean	false	Checked by default.
data-zag-switch-name-value	String	""	name of the hidden input (for forms).
data-zag-switch-value-value	String	"on"	Submitted value when checked.
data-zag-switch-disabled-value	Boolean	false	Disable the switch.
data-zag-switch-required-value	Boolean	false	Mark the field required.
data-zag-switch-invalid-value	Boolean	false	Mark the field invalid.
data-zag-switch-read-only-value	Boolean	false	Read-only.

Events

Emits zag-switch:change — detail is { checked }.

Programmatic control

checked (getter), check(), uncheck(), toggle().