Skip to main content

Switch

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

1'use client';
2

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

5export function Default() {
6  return <Switch aria-label="Toggle switch" />;
7}

Installation

pnpm dlx mateui add switch

Anatomy

1import { Switch } from '@/components/ui/switch';
1<Switch id="airplane-mode" />

Variants

Default

1'use client';
2

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

5export function Default() {
6  return <Switch aria-label="Toggle switch" />;
7}

With Label

Switch component alongside a label for context.
1'use client';
2

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

6export function WithLabel() {
7  return (
8    <div className="flex items-center gap-2">
9      <Switch id="airplane-mode" />
10      <Label htmlFor="airplane-mode">Airplane Mode</Label>
11    </div>
12  );
13}

Disabled

A disabled state stops interactions.
1'use client';
2

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

6export function Disabled() {
7  return (
8    <div className="flex items-center gap-2">
9      <Switch id="disabled-switch" disabled />
10      <Label htmlFor="disabled-switch" className="opacity-50">
11        Airplane Mode
12      </Label>
13    </div>
14  );
15}

API Reference

Switch

PropTypeDefaultDescription
onCheckedChange(checked: boolean) => void-Callback when checked state changes
disabledboolean-Disables the switch
PreviousSpinnerNextTable