Select

Usage#

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "neelam-ui";
 
<Select defaultValue="utc">
  <SelectTrigger>
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="utc">UTC</SelectItem>
    <SelectItem value="est">Eastern (EST)</SelectItem>
  </SelectContent>
</Select>

Why not a native <select>?#

Everywhere else this library styles the real native control. A <select> is the exception: its open dropdown cannot be restyled in most browsers — padding, hover colour, and the radius of the <option> list itself are all outside CSS's reach. So the popup is rebuilt, and the pieces the platform can still provide are used deliberately:

• SelectContent is a native popover (popover="auto"), so Escape and outside-click dismissal come from the browser.
• Focus returns to the trigger on close via the popover's own toggle event — covering choosing an option, Escape, and clicking away with one path, the way a native <select> does.
• The panel's min-width is set from the trigger, so it never renders narrower than the control it belongs to.

Labelling#

SelectTrigger is a <button>, which is a labelable element, so a wrapping <label> names it. SelectValue's placeholder is not a label — it is what shows before a choice is made.

Selected text comes from the item#

SelectValue displays the selected option's rendered text, not its value. Each SelectItem registers its own label, so value="est" can display as "Eastern (EST)" with nothing to keep in sync.

Grouping#

SelectSeparator divides runs of options. It renders with no ARIA role — unlike ContextMenuSeparator, which is role="separator". That is not a stylistic choice: role="listbox" does not permit a separator child the way role="menu" does, and this was verified against axe. A role here would be invalid ARIA structure.

Controlled#

Both the value and the open state can be controlled, independently:

const [value, setValue] = useState("utc");
 
<Select value={value} onValueChange={setValue}>…</Select>

Keyboard#

Opening moves focus to the selected option, or the first one if nothing is selected yet — so re-opening a select lands where the user left it.

Accessibility#

Implements the APG select-only combobox pattern:

• The trigger is role="combobox" with aria-haspopup="listbox", aria-expanded, and aria-controls pointing at the panel.
• The panel is role="listbox"; each option is a native <button> recategorized as role="option" with aria-selected, so click, Enter, and Space activation stay native.
• Focus moves into the list on open and back to the trigger on close, through every dismissal path.
• The page behind is scroll-locked while the list is open, so the panel cannot drift away from its trigger.
• Open and close transitions are dropped under prefers-reduced-motion.

API reference#

Select#

SelectTrigger#

SelectValue#

SelectItem#