Switch

A control that allows the user to toggle between checked and unchecked states.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add switch

Variants & Examples

Default Switch

A basic switch for toggling between two states.

Airplane Mode

Code for Default Switch

1import { Switch } from "@/components/ui/switch"
2import { Label } from "@/components/ui/label"
3
4export function DefaultSwitch() {
5  return (
6    <div className="flex items-center space-x-2">
7      <Switch id="airplane-mode" />
8      <Label htmlFor="airplane-mode">Airplane Mode</Label>
9    </div>
10  )
11}

Disabled Switch

A disabled switch.

Disabled Mode

Code for Disabled Switch

1import { Switch } from "@/components/ui/switch"
2import { Label } from "@/components/ui/label"
3
4export function DisabledSwitch() {
5  return (
6    <div className="flex items-center space-x-2">
7      <Switch id="disabled-mode" disabled />
8      <Label htmlFor="disabled-mode">Disabled Mode</Label>
9    </div>
10  )
11}

Props

These are the available props for the Switch component:

Prop	Type	Description	Default
checked	boolean	The controlled checked state of the switch.	-
onCheckedChange	(checked: boolean) => void	Event handler called when the checked state changes.	-
defaultChecked	boolean	The initial checked state of the switch.	false
disabled	boolean	Whether the switch is disabled.	false