Introduction

Switches turn a single setting on or off and take effect straight away — no save step. If the change only applies once a form is submitted, use a Checkbox instead. Built on Radix UI's Switch primitive.

Following the UX4G spec, the handle grows when the switch is turned on: 16px to 24px at the default size, 12px to 18px at small.

Installation

npx shadcn@latest add https://indiacn.in/r/switch.json

import { Switch } from '@/components/ui/switch';

Usage

<div className="flex items-center gap-3">
<Switch id="notifications" defaultChecked />
<Label htmlFor="notifications">SMS notifications</Label>
</div>

Examples

Default

SMS notifications

SwitchDefault

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

export default function Component() {
  return (
    <div className='flex items-center gap-3'>
      <Switch id='notifications' defaultChecked />
      <Label htmlFor='notifications'>SMS notifications</Label>
    </div>
  );
}

Sizes

Default

Small

SwitchSizes

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

export default function Component() {
  return (
    <div className='grid gap-4'>
      <div className='flex items-center gap-3'>
        <Switch id='size-default' defaultChecked />
        <Label htmlFor='size-default'>Default</Label>
      </div>
      <div className='flex items-center gap-3'>
        <Switch id='size-sm' size='sm' defaultChecked />
        <Label htmlFor='size-sm'>Small</Label>
      </div>
    </div>
  );
}

Disabled

Disabled, on

Disabled, off

SwitchDisabled

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

export default function Component() {
  return (
    <div className='grid gap-4'>
      <div className='flex items-center gap-3'>
        <Switch id='disabled-on' disabled defaultChecked />
        <Label htmlFor='disabled-on'>Disabled, on</Label>
      </div>
      <div className='flex items-center gap-3'>
        <Switch id='disabled-off' disabled />
        <Label htmlFor='disabled-off'>Disabled, off</Label>
      </div>
    </div>
  );
}

Accessibility

Toggles with Space or Enter and is reachable with Tab.
Label the switch with what it controls, not its current state — "SMS notifications", not "Notifications on".
Because a switch applies immediately, avoid pairing it with a save button for the same setting.

API Reference

Switch

Prop	Type	Default	Description
`size`	`'default' \| 'sm'`	`'default'`	Track size: 52×32 or 39×24
`checked`	`boolean`	—	Controlled state
`defaultChecked`	`boolean`	`false`	Initial state when uncontrolled
`onCheckedChange`	`(checked: boolean) => void`	—	Fires when the state changes
`disabled`	`boolean`	`false`	Prevents interaction and dims to 38%
`required`	`boolean`	`false`	Marks the field as required in a form
`name`	`string`	—	Name submitted with the parent form
`value`	`string`	`'on'`	Value submitted when checked
`className`	`string`	—	Extra Tailwind classes

Switch

On this page