# Switch

An accessible switch with an animated thumb.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Preview [#preview]

<ComponentPreview src="examples/components/switch.tsx">
  <SwitchDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/switch.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/switch.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/switch.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/switch.json`" />

## Usage [#usage]

```tsx
import { Switch } from "@/components/ui/switch";

<Switch label="Notifications" defaultChecked />;
```

## API Reference [#api-reference]

Accepts Base UI Switch Root props: `checked`, `defaultChecked`, `onCheckedChange`, `disabled`, `name` and `required`. Optional `label` labels the control. Without it provide `aria-label`. `size`: default or compact; otherwise inherits SizeProvider.