Select

Allows the selection of a value from a set of predefined choices.

Usage

import { Select } from "@elemnts-ui/react"

<Select>
  <Select.HiddenSelect />
  <Select.Label />

  <Select.Control>
    <Select.Trigger>
      <Select.ValueText />
    </Select.Trigger>
    <Select.Indicator>
      {/* Icon */}
    </Select.Indicator>
    <Select.ClearTrigger>
      {/* Clear Icon */}
    </Select.ClearTrigger>
  </Select.Control>

  <Select.Positioner>
    <Select.Content>
      <Select.Item />

      <Select.ItemGroup>
        <Select.ItemGroupLabel />
        <Select.Item />
      </Select.ItemGroup>
    </Select.Content>
  </Select.Positioner>
</Select>

With icons

This example demonstrates how to use the component with icons to enhance the user interface.

Grouping

Use Select.ItemGroup to organize select options into distinct groups, making it easier for users to navigate and choose.

Disabled

Use the disabled prop to make the select component non-interactive.

API Reference

SelectRoot

The root component

Prop	Type	Default
collection	`ListCollection<T>`	-
value	`string[]`	-
defaultValue	`string[]`	-
onValueChange	`(details: ValueChangeDetails<T>) => void`	-
multiple	`boolean`	`false`
disabled	`boolean`	-
invalid	`boolean`	-
name	`string`	-
required	`boolean`	-
positioning	`PositioningOptions`	-
lazyMount	`boolean`	`true`
unmountOnExit	`boolean`	`true`
className	`string`	-

SelectTrigger

Opens the selection list on click.

Prop	Type	Default
showClear	`boolean`	`false`
asChild	`boolean`	-

SelectValue

Displays the selected value or placeholder

Prop	Type	Default
placeholder	`string`	-
className	`string`	-
asChild	`boolean`	-

SelectContent

Renders the content of the select list.

Prop	Type	Default
className	`string`	-
asChild	`boolean`	-

SelectClearTrigger

Clears the selected value.

Prop	Type	Default
asChild	`boolean`	-

SelectGroup

Groups items in the select list.

Prop	Type	Default
asChild	`boolean`	-

SelectGroupLabel

Renders the label for a group of items in the select list.

Prop	Type	Default
asChild	`boolean`	-

SelectItem

Renders an item in the select list.

Prop	Type	Default
asChild	`boolean`	-
item	`T`	-

SelectEmpty

Renders the empty state of the select list.

Prop	Type	Default
asChild	`boolean`	-