@xsolla/xui-toggle-button-group

A control for picking one or several options from a linear set of closely related options. Can be used to filter or to sort elements.

Installation

npm install @xsolla/xui-toggle-button-group
# or
yarn add @xsolla/xui-toggle-button-group

Usage

import { ToggleButtonGroup } from '@xsolla/xui-toggle-button-group';

// Single selection (default)
const [value, setValue] = useState('item1');

<ToggleButtonGroup
  items={[
    { id: 'item1', label: 'Option 1' },
    { id: 'item2', label: 'Option 2' },
    { id: 'item3', label: 'Option 3' },
  ]}
  value={value}
  onChange={(v) => setValue(v as string)}
/>

// Multiple selection
const [values, setValues] = useState(['item1', 'item3']);

<ToggleButtonGroup
  items={[
    { id: 'item1', label: 'Option 1' },
    { id: 'item2', label: 'Option 2' },
    { id: 'item3', label: 'Option 3' },
  ]}
  value={values}
  onChange={(v) => setValues(v as string[])}
  multiple
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | ToggleButtonGroupItem[] | required | Array of items to display | | value | string \| string[] | - | Controlled value(s) | | defaultValue | string \| string[] | - | Default value(s) for uncontrolled mode | | onChange | (value: string \| string[]) => void | - | Callback when selection changes | | size | 'xl' \| 'lg' \| 'md' \| 'sm' | 'md' | Size variant | | appearance | 'separated' \| 'united' | 'separated' | Visual style | | multiple | boolean | false | Allow multiple selections | | id | string | - | HTML id attribute | | testID | string | - | Test ID for testing frameworks | | aria-label | string | - | Accessible label for the group | | aria-labelledby | string | - | ID of element that labels this group |

ToggleButtonGroupItem

| Prop | Type | Description | |------|------|-------------| | id | string | Unique identifier | | label | string | Display text | | iconLeft | ReactNode | Optional icon on the left | | iconRight | ReactNode | Optional icon on the right | | disabled | boolean | Whether the item is disabled | | aria-label | string | Accessible label for screen readers |

Accessibility

• Uses role="radiogroup" for single selection, role="group" for multiple
• Arrow keys navigate between items
• Enter/Space selects/toggles items
• Proper aria-checked and aria-disabled states