Switch

A sliding toggle for boolean on/off states.

Basic

Switch manages its own state when used uncontrolled via defaultChecked. Click to toggle.

Off

'use client';

import { useState } from 'react';
import { Switch } from '@venator-ui/ui';

export function SwitchExample() {
const [checked, setChecked] = useState(false);

return (
  <div className="flex items-center gap-3">
    <Switch checked={checked} onCheckedChange={setChecked} />
    <span className="text-sm text-neutral-500">{checked ? 'On' : 'Off'}</span>
  </div>
);
}

With label

Pass label to render a text label to the right of the track. Clicking the label also toggles the switch.

Enable notificationsDark mode

<Switch label="Enable notifications" />
<Switch label="Dark mode" defaultChecked />

Controlled

Pass checked and onCheckedChange to control the switch externally.

'use client';

import { useState } from 'react';
import { Switch } from '@venator-ui/ui';

export function ControlledSwitch() {
const [checked, setChecked] = useState(false);

return (
  <Switch
    checked={checked}
    onCheckedChange={setChecked}
    label="Airplane mode"
  />
);
}

Disabled

Set disabled to prevent interaction. Works in both checked and unchecked states.

Disabled offDisabled on

<Switch label="Disabled off" disabled />
<Switch label="Disabled on" defaultChecked disabled />

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	`false`	Initial checked state in uncontrolled mode
`onCheckedChange`	`(checked: boolean) => void`	—	Called when the checked state changes
`label`	`string`	—	Text label rendered to the right of the track
`disabled`	`boolean`	`false`	Prevents interaction and applies muted styles