Foundation component · Forms

Select

Choose one value from a compact list without showing every option at once.

Live playground

Choose Select when

People choose one value from a familiar list and do not need to compare every option.
Use Radio for a short decision whose choices should remain visible.
Use Combobox when people need to search or select more than one value.

Labels and behavior

Connect the trigger to a visible label that describes the value being chosen.
Keyboard navigation, selection, dismissal, and focus restoration are provided by Base UI.
Keep option labels concise and use a placeholder only when no value has been selected.

Implementation

Compose the trigger and popup explicitly so labels, positioning, and option content remain application-owned.

import { Select } from "@lenso/ui/select";

<Select.Root defaultValue="default">
  <Select.Trigger>
    <Select.Value />
    <Select.Icon />
  </Select.Trigger>
  <Select.Portal>
    <Select.Positioner>
      <Select.Popup>
        <Select.List>
          <Select.Item value="default">
            <Select.ItemText>Default</Select.ItemText>
            <Select.ItemIndicator />
          </Select.Item>
        </Select.List>
      </Select.Popup>
    </Select.Positioner>
  </Select.Portal>
</Select.Root>;