Select

import { Select } from "@ps1ui/core";

Basic

<Select aria-label="shell">
  <option value="bash">bash</option>
  <option value="zsh">zsh</option>
  <option value="fish">fish</option>
</Select>

Grouped options

<Select aria-label="language">
  <optgroup label="systems">
    <option value="rust">Rust</option>
    <option value="zig">Zig</option>
  </optgroup>
  <optgroup label="scripting">
    <option value="ts">TypeScript</option>
    <option value="rb">Ruby</option>
  </optgroup>
</Select>

List box

{/* multiple — or any size above 1 — renders an in-page list
    box instead of a drop-down, so the ▾ disclosure glyph is dropped. */}
<Select aria-label="shells" multiple size={4}>
  <option value="bash">bash</option>
  <option value="zsh">zsh</option>
  <option value="fish">fish</option>
  <option value="nu">nushell</option>
</Select>

Custom width

{/* The disclosure marker is painted on the control itself, so
    width / max-width are ordinary props — no wrapping element needed. */}
<Select aria-label="shell" style={{ width: 160 }}>
  <option value="bash">bash</option>
  <option value="zsh">zsh</option>
</Select>

Disabled

<Select aria-label="shell" disabled>
  <option value="bash">bash</option>
  <option value="zsh">zsh</option>
</Select>

With a label

<Label htmlFor="shell">Login shell</Label>
<Select id="shell">
  <option value="bash">bash</option>
  <option value="zsh">zsh</option>
</Select>

Props