@xsolla/xui-switch

Toggle switch component with label, description, and error state support.

Installation

yarn add @xsolla/xui-switch

Usage

import { Switch } from '@xsolla/xui-switch';

<Switch
  label="Enable notifications"
  checked={enabled}
  onValueChange={setEnabled}
/>

Props

Switch

| Prop | Type | Default | Description | |------|------|---------|-------------| | checked | boolean | false | Whether the switch is on | | onValueChange | (value: boolean) => void | — | Callback when toggled | | size | 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Switch size | | disabled | boolean | false | Disables the switch | | state | 'default' \| 'hover' \| 'disable' \| 'error' | 'default' | Visual state | | label | string | — | Label text displayed beside the switch | | description | string | — | Secondary text below the label | | errorLabel | string | — | Error text shown when state is 'error' | | ariaLabel | string | — | Accessible label for screen readers |