Switch

Usage

The Switch component provides a toggleable control with support for controlled and disabled states.

import { Switch } from "@raystack/apsara/v1";
 
<Switch checked={true} />;

Switch Props

Prop	Type	Default
`checked`	`boolean`	-
`defaultChecked`	`boolean`	-
`onCheckedChange`	`(checked: boolean) => void`	-
`disabled`	`boolean`	-
`required`	`boolean`	-
`id`	`string`	-

Examples

State

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

<Flex gap="large" align="center">
  <Switch />
  <Switch defaultChecked />
  <Switch disabled />
  <Switch disabled defaultChecked />
  <Switch required />
</Flex>

Controlled Usage

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

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

Accessibility

The Switch component follows WAI-ARIA guidelines for toggle buttons:

Uses proper ARIA attributes (aria-checked, aria-required, aria-label)
Supports keyboard navigation (Space and Enter to toggle)
Includes proper labeling and description support
Changes cursor to 'not-allowed' when disabled
Associates labels with the switch using htmlFor