Skip to content

Switch

Immediate on/off setting. Use for instant effects, not for form submission choices (those are checkboxes).

Example

<Switch name="notifications" label="Email notifications" checked />
<Switch name="dark" label="Dark mode" />

Props

PropTypeDefaultDescription
namestring-Form field name.
checkedbooleanfalseOn state.
labelstring-Or use the default slot.

Theming

:root {
  --ink-switch-track-width: 2.5rem;
}

Accessibility