FORMS

Switch

Memphis toggle: square thumb sliding between an ivory and a primary track. Use for boolean preferences that take effect immediately (notifications on / off, dark mode on / off). Built on Radix Switch.

Import

import { Switch, Label } from 'damo-ui'

Switch + label

1<div className="flex items-center gap-3">
2  <Switch id="notify" />
3  <Label htmlFor="notify">Email notifications</Label>
4</div>

States

1<Switch defaultChecked />
2<Switch defaultChecked={false} />
3<Switch disabled />
4<Switch defaultChecked disabled />

Props

Switch props
PropTypeDefaultDescription
checkedboolean—Controlled checked state. Pair with onCheckedChange.
defaultCheckedboolean—Uncontrolled initial checked state.
onCheckedChange(checked: boolean) => void—Fires whenever the checked state changes.
disabledboolean—Disables the input.
namestring—Name attribute for native form submission.
valuestring—Submitted form value when checked. Defaults to "on".

Switch vs Checkbox

  • Use Switch when toggling a setting takes effect immediately (push notifications, dark mode).
  • Use Checkbox when the value is part of a form that gets submitted (accept terms, select preferences).

Accessibility

  • Renders role="switch" with aria-checked reflecting on/off state.
  • Always associate a visible label or pass aria-label.
  • Keyboard: Space toggles.
← RadioGroupSlider →