Switch

Switch renders a token-styled boolean preference control.

CoreBasics@gaudi/design-system/core/SwitchView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Switch from '@gaudi/design-system/core/Switch';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/switch-card-grid.json.

import { Switch } from '@gaudi/design-system';
<Switch label='Email notifications' defaultChecked />

Props

label

defaultChecked

sizedefault md

disabled

Switch.jsx

import Switch from '@gaudi/design-system/core/Switch';
<Switch label='Airplane mode' />

8 props

Switch exposes role switch, aria-checked, disabled state, and a visible label when provided.