Select

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.

Select a fruit

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.

Select a food

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

The root component that contains all the select parts.

Prop	Type	Default
defaultOpen	boolean
defaultValue	string
disabled	boolean
name	string
onOpenChange	(open: boolean) => void
onValueChange	(value: string) => void
open	boolean
value	string

SelectTrigger

The button that toggles the select.

Prop	Type	Default
children	ReactNode
className	string
showDirectionArrow	boolean	true

SelectValue

The selected value to display in the trigger.

Prop	Type	Default
placeholder	string

SelectContent

The floating content that contains the select items.

Prop	Type	Default
className	string
position	string	"popper"

SelectItem

A selectable item.

Prop	Type	Default
value	string
className	string
disabled	boolean

SelectGroup

Used to group multiple items together.

Prop	Type	Default
children	ReactNode

SelectLabel

Used to render a label for a group of items.

Prop	Type	Default
children	ReactNode
className	string

SelectSeparator

Used to visually separate items in the select.

Prop	Type	Default
className	string