Switch

The toggle used throughout Settings — a 24×16 pill track that flips from a muted grey to brand blue with a 12px white thumb that slides across. Renders a role="switch" button (a native checkbox's semantics without its box), so label association and keyboard (Space / Enter) come for free.

Installation

npm install @crisp-ui-kit/crisp

Large size

Props

Notes

• Semantics. It's a <button role="switch"> with aria-checked — screen readers announce "switch, on/off", and Space/Enter toggle it natively. Give it an aria-label or wrap it in a <label>.
• Controlled vs uncontrolled. With checked set, the parent owns the value (the switch won't self-update); otherwise it tracks its own state from defaultChecked.
• Measured. Track 24×16, thumb 12px (2px inset, slides 8px), on-colour #266df0; the background and thumb both animate .2s.
• Large size. size="lg" (crisp#1302) is Linear's settings switch: a 30×20 track with a 16px thumb. It is opt-in; the default md stays Attio's 24×16, so nothing changes unless you pass the prop. Keep one size within a settings list.

Used across the settings surface — see it in a settings screen soon.