Skip to main content
Select provides a dropdown interface for choosing one or multiple items from a list. It supports grouping, icons, and custom rendering.

​
Basic Usage

import { Select } from "@soft-ui/react/select"

function Example() {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Choose an option" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner>
          <Select.Popup>
            <Select.List>
              <Select.Item value="option-1">
                <Select.ItemText>Option 1</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
              <Select.Item value="option-2">
                <Select.ItemText>Option 2</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            </Select.List>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  )
}

​
Variants and Sizes

Select supports the same variants and sizes as Input:
  • Variants: secondary (default), tertiary
  • Sizes: s, m (default), l
import { Select } from "@soft-ui/react/select"

function Example() {
  return (
    <>
      <Select.Root variant="secondary" size="m">
        <Select.Trigger>
          <Select.Value placeholder="Secondary" />
          <Select.Icon />
        </Select.Trigger>
      </Select.Root>

      <Select.Root variant="tertiary" size="l">
        <Select.Trigger>
          <Select.Value placeholder="Tertiary Large" />
          <Select.Icon />
        </Select.Trigger>
      </Select.Root>
    </>
  )
}

​
Grouped Options

import { Select } from "@soft-ui/react/select"

function Example() {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Select a fruit" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner>
          <Select.Popup>
            <Select.List>
              <Select.Group>
                <Select.GroupLabel>Fruits</Select.GroupLabel>
                <Select.Item value="apple">
                  <Select.ItemText>Apple</Select.ItemText>
                  <Select.ItemIndicator />
                </Select.Item>
              </Select.Group>
              <Select.Group>
                <Select.GroupLabel>Vegetables</Select.GroupLabel>
                <Select.Item value="carrot">
                  <Select.ItemText>Carrot</Select.ItemText>
                  <Select.ItemIndicator />
                </Select.Item>
              </Select.Group>
            </Select.List>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  )
}
The Select component automatically matches the popup width to the trigger width.

​
API Reference

For complete prop documentation including multi-select and controlled state, see the Select API reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us