Select

A listbox-style select built on Dropdown — an options array, not <option> children, so it's no longer a native <select> underneath. That trades the free native behavior (real <select>/<option>, "menu"/"menuitem" ARIA roles rather than the more semantically exact "listbox"/"option") for the same look, keyboard nav, and positioning every other Dropdown-based menu in this system already has. For a long list where scanning beats scrolling, see Combobox — same options/value/onChange shape, with a search field added.

<Select defaultValue="fr" label="Country" />

Examples

options takes plain data, not JSX — each entry's own disabled flag skips it during keyboard navigation without needing a conditionally-rendered <DropdownItem>:

<Select
  label="Country"
  placeholder="Choose a country…"
  options={[
    { value: "us", label: "United States" },
    { value: "ca", label: "Canada" },
    { value: "mx", label: "Mexico", disabled: true },
  ]}
/>

Controlled, for when the selection drives something else on the page (a shipping estimate, a dependent second Select):

const [country, setCountry] = useState("us");

<Select label="Country" value={country} onChange={setCountry} options={countries} />;

Props