Switch

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

Anatomy

Import and assemble the component:

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

3<Switch />

API Reference

Renders a toggleable switch input.

Prop

Type

Examples

State

The Switch component supports various states to handle different interaction scenarios.

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

Size Variants

The Switch component comes in two sizes: large (default) and small.

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

Controlled Usage

Use the Switch component in a controlled manner to manage its state externally.

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

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