Switch

Toggle switches for boolean values

InputsStable

Preview

Interactive preview of the Switch component with different variants.

Email Notifications

Push Notifications

Disabled Switch

Installation

Install the package via npm:

bash

npm install apex-design-system

Import

tsx

import { Switch, Label } from 'apex-design-system';

Basic Usage

tsx

<div className="flex items-center gap-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in Storybook View source