Select

Displays a list of options and allows a single value to be selected.

Anatomy

<Select>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel />
      <SelectItem />
    </SelectGroup>
    <SelectSeparator />
  </SelectContent>
</Select>

Usage

To create a select menu, compose <Select>, <SelectTrigger>, <SelectValue>, <SelectContent>, and one or more <SelectItem> components.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "stylus-ui/Select";

export default () => (
  <Select>
    <SelectTrigger className="w-[180px]">
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
      <SelectItem value="grape">Grape</SelectItem>
    </SelectContent>
  </Select>
);

With groups

Use <SelectGroup> and <SelectLabel> to organize items into labeled groups.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from "stylus-ui/Select";

export default () => (
  <Select>
    <SelectTrigger className="w-[180px]">
      <SelectValue placeholder="Select a food" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Fruits</SelectLabel>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectLabel>Vegetables</SelectLabel>
        <SelectItem value="carrot">Carrot</SelectItem>
        <SelectItem value="celery">Celery</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
);

API Reference

`Select`

Displays a list of options and allows a single value to be selected.

`autoComplete`

string

`defaultOpen`

boolean

`defaultValue`

string

`dir`

"ltr" | "rtl"

`disabled`

boolean

`form`

string

`name`

string

`onOpenChange`

(open: boolean) => void

`onValueChange`

(value: string) => void

`open`

boolean

`required`

boolean

`value`

string

`SelectGroup`

`asChild`

boolean

`SelectValue`

`asChild`

boolean

`placeholder`

ReactNode

`SelectTrigger`

`asChild`

boolean

`showDirectionArrow`

boolean = true

Whether to show the chevron icon indicating open/closed.

`SelectScrollUpButton`

`asChild`

boolean

`SelectScrollDownButton`

`asChild`

boolean

`SelectContent`

`align`

"center" | "end" | "start"

`alignOffset`

number

`arrowPadding`

number

`asChild`

boolean

`avoidCollisions`

boolean

`collisionBoundary`

null | Element | Boundary[]

`collisionPadding`

number | Partial<Record<"bottom" | "top" | "left" | "right", number>>

`hideWhenDetached`

boolean

`onCloseAutoFocus`

(event: Event) => void

Event handler called when auto-focusing on close. Can be prevented.

`onEscapeKeyDown`

(event: KeyboardEvent) => void

Event handler called when the escape key is down. Can be prevented.

`onPointerDownOutside`

(event: PointerDownOutsideEvent) => void

Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.

`position`

"item-aligned" | "popper" = "popper"

`side`

"bottom" | "top" | "left" | "right"

`sideOffset`

number

`sticky`

"partial" | "always"

`updatePositionStrategy`

"always" | "optimized"

`SelectLabel`

`asChild`

boolean

`SelectItem`

`value`

Required

string

`asChild`

boolean

`disabled`

boolean

`textValue`

string

`SelectSeparator`

`asChild`

boolean