amezquita design systemGet started

Primitives

Switch

Binary toggle for on/off settings; renders as a styled checkbox under the hood

Markdown version for agents

Import
import { Switch } from '@amezquita/design-system/components/primitives/Switch'

Live render

    Props

    PropTypeDescription
    id?string
    label?string
    checked?boolean
    defaultChecked?boolean
    onCheckedChange?(checked: boolean) => void
    disabled?boolean
    required?boolean
    name?string
    value?string
    aria-label?string

    Tokens

    TokenTypeValue
    --switch-thumb-sizedimension16px
    --switch-track-heightdimension24px
    --switch-track-widthdimension44px

    Usage example

    tsx
    <Switch
  id="default"
  label="Enable notifications"
/>