Multi Select

A cross-platform React multi-select component that allows users to select multiple options from a dropdown list with checkboxes.

Installation

npm install @xsolla/xui-multi-select
# or
yarn add @xsolla/xui-multi-select

Demo

Basic Multi Select

import * as React from 'react';
import { MultiSelect } from '@xsolla/xui-multi-select';

export default function BasicMultiSelect() {
  const [selected, setSelected] = React.useState<string[]>([]);

  return (
    <MultiSelect
      options={['React', 'Vue', 'Angular', 'Svelte']}
      value={selected}
      onChange={setSelected}
      placeholder="Select frameworks"
    />
  );
}

With Label

import * as React from 'react';
import { MultiSelect } from '@xsolla/xui-multi-select';

export default function LabeledMultiSelect() {
  const [selected, setSelected] = React.useState<string[]>(['Marketing']);

  return (
    <MultiSelect
      label="Departments"
      options={['Engineering', 'Marketing', 'Sales', 'Design', 'HR']}
      value={selected}
      onChange={setSelected}
      placeholder="Select departments"
    />
  );
}

Multi Select Sizes

import * as React from 'react';
import { MultiSelect } from '@xsolla/xui-multi-select';

export default function MultiSelectSizes() {
  const options = ['Option 1', 'Option 2', 'Option 3'];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <MultiSelect options={options} size="xs" placeholder="Extra Small" />
      <MultiSelect options={options} size="sm" placeholder="Small" />
      <MultiSelect options={options} size="md" placeholder="Medium" />
      <MultiSelect options={options} size="lg" placeholder="Large" />
      <MultiSelect options={options} size="xl" placeholder="Extra Large" />
    </div>
  );
}

Anatomy

import { MultiSelect } from '@xsolla/xui-multi-select';

<MultiSelect
  options={['a', 'b', 'c']}   // Available options
  value={selectedArray}        // Currently selected values
  onChange={setSelected}       // Selection change handler
  placeholder="Select..."      // Placeholder text
  label="Label"                // Label above select
  size="md"                     // Size variant
  disabled={false}             // Disabled state
/>

Examples

Form Integration

import * as React from 'react';
import { MultiSelect } from '@xsolla/xui-multi-select';
import { Button } from '@xsolla/xui-button';

export default function FormMultiSelect() {
  const [skills, setSkills] = React.useState<string[]>([]);

  const handleSubmit = () => {
    console.log('Selected skills:', skills);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
      <MultiSelect
        label="Skills"
        options={['JavaScript', 'TypeScript', 'Python', 'Go', 'Rust', 'Java']}
        value={skills}
        onChange={setSkills}
        placeholder="Select your skills"
      />
      <Button onPress={handleSubmit}>Submit</Button>
    </div>
  );
}

Disabled State

import * as React from 'react';
import { MultiSelect } from '@xsolla/xui-multi-select';

export default function DisabledMultiSelect() {
  return (
    <MultiSelect
      options={['Option 1', 'Option 2', 'Option 3']}
      value={['Option 1']}
      disabled
      placeholder="Disabled select"
    />
  );
}

API Reference

MultiSelect

MultiSelect Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | options | string[] | - | Required. Available options. | | value | string[] | [] | Currently selected values. | | onChange | (value: string[]) => void | - | Selection change handler. | | placeholder | string | - | Placeholder when nothing selected. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Component size. | | label | string | - | Label above select. | | disabled | boolean | false | Disabled state. |

Display Behavior

• When no items selected: Shows placeholder
• When items selected: Shows "N selected" text
• Dropdown shows checkboxes for each option
• Checked items are visually indicated

Accessibility

• Uses checkbox pattern for selections
• Dropdown is keyboard navigable
• Selection state announced to screen readers