Acronis UIKit
Components

Select

Choose one option from a list (alias of the InputSelect family).

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectGroupLabel,
} from '@acronis-platform/ui-react';

Select is an alias of the InputSelect family, themed by the --ui-input-select-* tokens and built on Base UI's Select primitive. The Select* names map onto the corresponding InputSelect* parts (SelectGroupInputSelectSection, SelectGroupLabelInputSelectSection­Label). Prefer importing InputSelect* directly in new codeSelect exists for compatibility.

Examples

A basic select:

<Select items={fruitItems}>
  <SelectTrigger aria-label="Fruit">
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="grapes">Grapes</SelectItem>
  </SelectContent>
</Select>

A disabled trigger:

<Select items={fruitItems} disabled>
  <SelectTrigger aria-label="Fruit">
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>{/* …items… */}</SelectContent>
</Select>

Grouped options:

<SelectContent>
  <SelectGroup>
    <SelectGroupLabel>Fruits</SelectGroupLabel>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectGroup>
</SelectContent>

API Reference

The Select* parts are re-exports of the InputSelect* parts and share their props. See InputSelect for the full reference and the Base UI Select docs for each primitive's prop surface.

Edit on GitHub

On this page