Select

<Select value={value} onValueChange={setValue}>
  <SelectLabel>Relative time</SelectLabel>
  <SelectTrigger>
    <SelectValue placeholder="Select an option..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="days-1">Last 24 hours</SelectItem>
    <SelectItem value="days-7">Last 7 days</SelectItem>
    <SelectItem value="months-1">Last month</SelectItem>
  </SelectContent>
  <SelectHelperText>Choose a time range</SelectHelperText>
</Select>

// clearable — the × appears only once a value is set, and never while disabled
// (RULE-12, same contract as Combobox's own `clearable`)
<Select clearable value={value} onValueChange={setValue}>
  <SelectLabel>Relative time</SelectLabel>
  <SelectTrigger>
    <SelectValue placeholder="Select an option..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="days-1">Last 24 hours</SelectItem>
    <SelectItem value="days-7">Last 7 days</SelectItem>
  </SelectContent>
</Select>

// error lives on the Root only (arbitration Q1) — SelectTrigger and
// SelectHelperText need no prop, both read it from context
<Select value={value} onValueChange={setValue} error>
  <SelectLabel required>Relative time</SelectLabel>
  <SelectTrigger>
    <SelectValue placeholder="Select an option..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="days-1">Last 24 hours</SelectItem>
  </SelectContent>
  <SelectHelperText>This field is required</SelectHelperText>
</Select>

// SelectGroup + SelectSeparator for categorized options (RULE-08: never
// nest a Select inside another Select's content — use groups instead)
<Select value={value} onValueChange={setValue}>
  <SelectLabel>Entity type</SelectLabel>
  <SelectTrigger>
    <SelectValue placeholder="Select a type..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="report">Report</SelectItem>
      <SelectItem value="malware">Malware</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectItem value="identity">Identity</SelectItem>
      <SelectItem value="location">Location</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// No SelectLabel — an accessible name must be supplied directly, or FDS
// warns in development (never in production, never blocks rendering)
<Select value={value} onValueChange={setValue}>
  <SelectTrigger aria-label="Filter by status">
    <SelectValue placeholder="All statuses" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="open">Open</SelectItem>
    <SelectItem value="closed">Closed</SelectItem>
  </SelectContent>
</Select>