Switch

A toggle switch alternative to a checkbox.

Airplane Mode

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/switch.json

import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'

<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>

Airplane Mode

Use the Field components to add a label and a description next to the switch.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

Disabled

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

Accept terms and conditions

You must accept the terms and conditions to continue.

Use the size prop to change the size of the switch. Available sizes are sm and default.

Small

Default