Switch

Anatomy

Import and assemble the component:

1import { Switch } from "@raystack/apsara";
2
3<Switch />

Usage

Size

Two sizes. large is the default; use small inside table rows, toolbars, and settings lists where the control sits beside dense text.

1<Flex gap={9} align="center">
2  <Switch size="large" />
3  <Switch size="large" defaultChecked />
4  <Switch size="small" />
5  <Switch size="small" defaultChecked />
6</Flex>

State

A switch can be on, off, or disabled. Use defaultChecked for the starting position when you don't need to read the value back.

1<Flex gap={9} align="center">
2  <Switch />
3  <Switch defaultChecked />
4  <Switch disabled />
5  <Switch disabled defaultChecked />
6  <Switch required />
7</Flex>

Controlled

Pass checked with onCheckedChange to own the state yourself — needed when the value lives in a form, syncs to a server, or drives something else on the page.

1(function ControlledSwitch() {
2  const [checked, setChecked] = React.useState(false);
3  return <Switch checked={checked} onCheckedChange={setChecked} />;
4})

API Reference

Renders a toggleable switch input.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Accessibility

• Follows the WAI-ARIA Switch pattern
• Uses role="switch" with aria-checked for state
• Supports keyboard activation with Space key
• Associates with labels via id and htmlFor attributes