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

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

Install the component from your command line.

npm install @raystack/apsara

import { Switch } from '@raystack/apsara/v1'

<Switch checked={true} />

The Switch component accepts the following props:

checked: The controlled checked state of the switch (boolean)
defaultChecked: The default checked state when uncontrolled (boolean)
onCheckedChange: Event handler called when the checked state changes (function)
disabled: When true, prevents the user from interacting with the switch (boolean)
required: When true, indicates that the user must check the switch (boolean)
id: A unique identifier for the switch (string)

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

Add labels to provide context for your switches.

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

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