Select ✦Documentation has not yet been reviewed by a human.

<Select
  label="Field"
  options={[
    { value: 'output_text', hint: 'Raw log message or event payload', icon: 'file' },
    { value: 'stream', hint: 'Log level: error · info · internal', icon: 'braces' },
    { value: 'container', hint: 'Host where the event occurred', icon: 'cube' },
    { value: 'archived', hint: 'Read-only snapshot', icon: 'folder-close', disabled: true },
    { value: 'flagged', hint: 'Needs review', icon: 'warning-triangle', tone: 'warning' },
    { value: 'custom', hint: 'Your own field path', icon: 'asterisk', tone: '#c026d3' },
  ]}
/>

// The same tree drives both modes — selection is global, so `selection` is the
// only difference between the two selects below.
const [one, setOne] = useState<string | null>('stream')
const [many, setMany] = useState(['stream', 'tag.env'])
const fields = [
  'output_text',                                         // a plain option
  { label: 'Log', options: ['stream', 'message', 'severity'] }, // an inline group
  {
    label: 'Metadata',                                   // a submenu (flyout)
    icon: 'braces',
    submenu: [
      'metadata.host',
      'metadata.region',
      { label: 'Tags', options: ['tag.env', 'tag.team'] }, // group inside submenu
      { label: 'Custom', submenu: ['custom.a', 'custom.b'] }, // submenu inside submenu
    ],
  },
  { label: 'Time', submenu: ['vtime', 'wall_clock'], disabled: true }, // disabled → cascades
]

<Select label="Field · single" filter options={fields} value={one} onValueChange={setOne} />

<Select label="Fields · multiple" selection="multiple" filter options={fields} value={many} onValueChange={setMany} />

const options = ['output_text', 'stream', 'container', 'vtime', 'custom']
const [check, setCheck] = useState<string | null>('stream')
const [radio, setRadio] = useState<string | null>('stream')
const [many, setMany] = useState(['stream', 'container'])

<Select label="Checkmark · brand tone" indicator="check" tone="brand"
  toneScope="selected" options={options} value={check} onValueChange={setCheck} />

<Select label="Radio · custom tone" indicator="radio" tone="#c026d3"
  toneScope="selected" options={options} value={radio} onValueChange={setRadio} />

<Select label="Multiple · brand tone" selection="multiple" tone="brand"
  toneScope="selected" placeholder="Select fields…"
  options={options} value={many} onValueChange={setMany} />

const options = [
  { value: 'output_text', hint: 'Raw log message or event payload' },
  { value: 'stream', hint: 'Log level: error · info · internal' },
  { value: 'container', hint: 'Host where the event occurred' },
  { value: 'vtime', hint: 'Simulation time in seconds' },
  { value: 'source', hint: 'Emitting system or process' },
  { value: 'message', hint: 'Assertion description' },
  { value: 'condition', hint: 'Passing or failing' },
  { value: 'fault', hint: 'Injected fault type and name' },
]
const [one, setOne] = useState<string | null>('stream')
const [many, setMany] = useState(['stream'])

<Select label="Single · filter" filter indicator="check"
  options={options} value={one} onValueChange={setOne} />

<Select label="Multiple · filter" filter selection="multiple"
  placeholder="Fields…" options={options} value={many} onValueChange={setMany} />

<Select label="Field" options={options}
  filter={(option, query) => String(option.value).startsWith(query)} />

const [field, setField] = useState<string | null>('stream')

<Select
  label="Field"
  options={['output_text', 'stream', 'container', 'vtime', 'custom']}
  placeholder="Select a field…"
  value={field}
  onValueChange={setField}
  clearable
/>
<Button label="Reset selection" size="small" priority="tertiary"
  onClick={() => setField(null)} />

<Select
  label="Run"
  options={runs.map((run) => ({ value: run.id, label: run.name, run }))}
  onValueChange={(id, attrs) => {
    if (!('all' in attrs)) openRun(attrs.option.run)
  }}
/>

<Select label="Small · info"    size="small"  status="info"     hint="Lowercase & dashes only" options={OPTIONS} defaultValue="stream" />
<Select label="Medium · success" size="medium" status="success"  hint="Field is valid" options={OPTIONS} defaultValue="stream" />
<Select label="Large · critical" size="large"  status="critical" hint="Pick a field" options={OPTIONS} placeholder="Required…" />
{/* statusIcon overrides the per-status glyph, or `false` drops it, as on Input */}
<Select label="Small · custom icon" size="small" status="info" statusIcon="sparkles" hint="statusIcon override" options={OPTIONS} defaultValue="stream" />

const TONE = { in_progress: 'info', completed: 'neutral', incomplete: 'critical' }
const LABEL = { in_progress: 'In progress', completed: 'Completed', incomplete: 'Incomplete' }

// The field fills its container, so the wrapper's width bounds the trigger.
// (<Select style={{ width: 260 }} …> works too; style forwards to the field.)
<div style={{ width: 260 }}>
  <Select
    label="Test run"
    filter                                     // name / date stay searchable
    options={runs}                             // { value, label, name, ranAt, status }[]
    value={run}
    onValueChange={setRun}
    renderOption={(option) => {
      const run = option as Run                 // index-signature fields are `unknown`
      return (
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0, gap: 2 }}>
          {/* The ellipsized name is the anchor; the nested Tooltip (its children are the
              bubble) reveals the full name when the name is clipped. */}
          <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {run.name}
            <Tooltip truncatedOnly>{run.name}</Tooltip>
          </span>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ color: 'var(--text-3)', fontSize: 12, fontVariantNumeric: 'tabular-nums' }}>{run.ranAt}</span>
            <Tag size="small" tone={TONE[run.status]} style={{ marginInlineStart: 'auto' }}>{LABEL[run.status]}</Tag>
          </div>
        </div>
      )
    }}
  />
</div>

// Same ellipsis-ready row for both; it truncates once the menu is capped.
const renderPath = (o) => (
  <span style={{ display: 'block', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
    {o.label}
    <Tooltip truncatedOnly>{o.label}</Tooltip>   {/* reveals the full path when clipped */}
  </span>
)

// First: no cap, so the widest row stretches the menu past the trigger.
<div style={{ width: 220 }}>
  <Select label="No cap · grows to fit" options={paths} value={a} onValueChange={setA} renderOption={renderPath} />
</div>

// Second: cap the popover so the same rows truncate to the trigger width.
<style>{`.path-capped a-menu::part(menu) { max-width: 220px }`}</style>
<div className="path-capped" style={{ width: 220 }}>
  <Select label="Capped · ellipsizes" options={paths} value={b} onValueChange={setB} renderOption={renderPath} />
</div>

<Select
  label="Log level"
  indicator="check"                     // keeps the semantics (role + aria-checked)
  options={levels}                       // { value, label, dot }[]
  value={level}
  onValueChange={setLevel}
  renderIndicator={(state) => {
    const dot = levels.find((l) => l.value === state.value).dot
    return (
      <span style={{
        width: 10, height: 10, borderRadius: '50%', display: 'inline-block',
        boxShadow: `inset 0 0 0 2px ${dot}`,
        background: state.selected ? dot : 'transparent',
      }} />
    )
  }}
/>

const teams = [
  { value: 'eng', label: 'Engineering' },
  { value: 'design', label: 'Design' },
  { value: 'ops', label: 'Operations' },
  { value: 'sales', label: 'Sales' },
  { value: 'support', label: 'Support' },
]
const [a, setA] = useState(['eng', 'design', 'ops'])
const [b, setB] = useState(['eng', 'design'])

// verbose: the count summary lists the picks
<Select label="verbose" selection="multiple" placeholder="Pick teams" options={teams} value={a} onValueChange={setA} verbose />

// renderSummary: build the text yourself
<Select
  label="renderSummary"
  selection="multiple"
  placeholder="Pick teams"
  options={teams}
  value={b}
  onValueChange={setB}
  // one label; a count past that; every option → "All teams"
  renderSummary={(selected) =>
    selected.length === teams.length
      ? 'All teams'
      : selected.length > 1
        ? `${selected.length} teams`
        : undefined // fall back to the single label
  }
/>

const [value, setValue] = useState(['stream', 'message'])

<Select
  selection="multiple"
  options={fields}
  value={value}
  onValueChange={setValue}
  renderTrigger={({ open, selected }) => (
    // Return one focusable element. It supplies the required ARIA attributes.
    <Button icon="filter" label="Filter" priority="secondary"
      aria-haspopup="menu" aria-expanded={open ? 'true' : 'false'}>
      {selected.length > 0 && (
        <Tag size="small" priority="primary" tone="brand">
          {selected.length === fields.length ? 'All' : selected.length}
        </Tag>
      )}
    </Button>
  )}
/>

const columns = ['Name', 'Status', 'Owner', 'Created', 'Duration', 'Environment', 'Branch', 'Commit']
const [hidden, setHidden] = useState([])

<Select
  selection="multiple"
  options={columns}
  value={hidden}
  onValueChange={setHidden}
  // selecting a column hides it: eye by default, eye-closed once hidden
  renderIndicator={({ selected }) => (
    <Icon shape={selected ? 'eye-closed' : 'eye'} />
  )}
  renderTrigger={({ open, selected }) => (
    <Button icon="columns-3-cog" priority="tertiary" aria-label="Configure columns"
      aria-haspopup="menu" aria-expanded={open ? 'true' : 'false'}>
      {selected.length > 0 && (
        <Tag size="small" priority="secondary" tone="neutral">{selected.length}</Tag>
      )}
    </Button>
  )}
/>

const [options, setOptions] = useState(['bug', 'feature', 'chore', 'docs'])
const [value, setValue] = useState<string | null>(null)
const [loading, setLoading] = useState(false) // application fetch state

<Select
  label="Tag"
  filter
  placeholder="Filter or create…"
  options={loading ? [] : options}
  value={value}
  onValueChange={setValue}
  renderEmpty={({ query }) =>
    loading ? (
      <MenuSeparator>Loading…</MenuSeparator>
    ) : (
      <>
        <MenuSeparator>No options are matching the filter</MenuSeparator>
        <MenuItem
          icon="plus"
          label={`Create "${query}"`}
          onSelect={() => { setOptions((o) => [...o, query]); setValue(query) }}
        />
      </>
    )
  }
/>