Switch

The Switch component is a toggle control with multiple visual variants, sizes, labels, and disabled state.

Overview

• Variants: basic, rounded, outline
• Sizes: sm, md, lg
• Label support
• Controlled usage with boolean checked
• Disabled state

Basic Usage

import { Switch } from '@/components/atoms'

function MyComponent() {
  const [on, setOn] = useState(false)
  return <Switch label='Enable feature' checked={on} onChange={setOn} />
}

Props

Prop	Type	Default	Description
checked	boolean	false	Controlled toggle state
onChange	(checked: boolean) => void	-	Change handler (not called when disabled)
id	string	-	Input id
label	string	''	Optional label text
className	string	''	Additional classes
variant	string	'basic'	Visual style: basic, rounded, outline
size	string	'md'	Size: sm, md, lg
disabled	boolean	false	Disable interaction and adjust styles
...props	any	-	Spread to underlying input

Variants & Sizes

<Switch label='Basic' checked={state.basic} onChange={(v) => setState((s) => ({ ...s, basic: v }))} />
<Switch label='Rounded' variant='rounded' checked={state.rounded} onChange={(v) => setState((s) => ({ ...s, rounded: v }))} />
<Switch label='Outline' variant='outline' checked={state.outline} onChange={(v) => setState((s) => ({ ...s, outline: v }))} />

<Switch label='Small' size='sm' checked={state.sm} onChange={(v) => setState((s) => ({ ...s, sm: v }))} />
<Switch label='Medium' size='md' checked={state.md} onChange={(v) => setState((s) => ({ ...s, md: v }))} />
<Switch label='Large' size='lg' checked={state.lg} onChange={(v) => setState((s) => ({ ...s, lg: v }))} />

Disabled

<Switch label='Disabled Switch' checked={false} disabled />

Styling

• Root: .switch (+ composed variants and sizes)
  • Variants: .switch-rounded, .switch-outline
  • Sizes: .switch-sm, .switch-md, .switch-lg
  • Disabled: .disabled
• Native input (visually hidden): .switch-input
• Track: .switch-slider (uses ::before knob)
• Label: .switch-label

Accessibility

• Uses a native checkbox for semantics and keyboard support
• The label is clickable; ensure text is descriptive
• Provide clear focus styles

Best Practices

• Keep labels concise
• Use outline variant when you need transparent tracks
• Size the switch appropriately for the layout density