Switch

Inputs

Stablev1.0.0

Toggle switch for boolean settings, built on Ariakit for accessibility.

Preview

Enable notifications

Installation

pnpm add @component-labs/ui

Usage

import { Switch } from "@component-labs/ui";

<Switch label="Enable notifications" />

Props

Name	Type	Default	Description
`variant`	`'default' \| 'success'`	`'default'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the switch
`label`	`ReactNode`	`-`	Label text to display next to the switch
`description`	`ReactNode`	`-`	Description text to display below the label
`checked`	`boolean`	`-`	Controlled checked state
`defaultChecked`	`boolean`	`-`	Default checked state for uncontrolled usage
`disabled`	`boolean`	`false`	Whether the switch is disabled
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	`-`	Callback when switch state changes

Examples

Basic Switch

Simple toggle switch

<Switch label="Enable notifications" />

With Description

Switch with additional description

<Switch
  label="Marketing emails"
  description="Receive updates about new features and products"
/>

Sizes

Different switch sizes

<div className="flex flex-col gap-4">
  <Switch size="sm" label="Small switch" />
  <Switch size="md" label="Medium switch" />
  <Switch size="lg" label="Large switch" />
</div>

Variants

Available visual variants

<div className="flex flex-col gap-4">
  <Switch variant="default" label="Default variant" defaultChecked />
  <Switch variant="success" label="Success variant" defaultChecked />
</div>

Controlled

Using switch in controlled mode

const [enabled, setEnabled] = useState(false);

<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
  label="Controlled switch"
/>

Disabled State

Switch in disabled state

<Switch label="Disabled switch" disabled />

Performance

Bundle Size

~3kB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority

Accessibility

•Built on Ariakit's accessible Switch component
•Proper ARIA attributes (role='switch', aria-checked)
•Keyboard accessible (Space to toggle)
•Focus visible states with ring indicator
•Screen reader announcements for state changes