Switch

A control that allows the user to toggle between checked and not checked.

Props

PropTypeDefaultDescription
...Radix propsComponentProps<typeof SwitchPrimitive.Root>-All Radix switch root props

Examples

<Switch id="notifications" defaultChecked />

Usage

<div className="flex flex-col gap-6">
  <div className="flex items-center gap-2">
    <Switch id="Switch" />
    <label htmlFor="Switch">Switch</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="Switch On" defaultChecked />
    <label htmlFor="Switch On">Switch checked</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="Switch disabled" disabled />
    <label htmlFor="Switch disabled">Switch disabled</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="Switch disabled checked" defaultChecked disabled />
    <label htmlFor="Switch disabled checked">Switch disabled checked</label>
  </div>
</div>