Forms Select

Select

Pick one from a list — a place, a room. Keyboard and screen-reader ready (Radix Select).

Preview

A place, by landscape

Room

Usage

tsx

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

<Select defaultValue="mixed-dorm">
  <SelectTrigger className="w-full" aria-label="Room">
    <SelectValue placeholder="Pick a room" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Dorms</SelectLabel>
      <SelectItem value="mixed-dorm">Mixed dorm</SelectItem>
      <SelectItem value="female-dorm">Female dorm</SelectItem>
    </SelectGroup>
    <SelectItem value="private-room">Private room</SelectItem>
  </SelectContent>
</Select>

Select

Prop	Type	Default	Description
`value / defaultValue`	`string`	—	The chosen item (controlled / uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called with the new value.
`disabled`	`boolean`	`false`	Greys it out.

value / defaultValue

Type: string

Default: —

The chosen item (controlled / uncontrolled).

onValueChange

Type: (value: string) => void

Default: —

Called with the new value.

disabled

Type: boolean

Default: false

Greys it out.

SelectItem

Prop	Type	Default	Description
`value`	`string`	—	Required, unique in the list.
`disabled`	`boolean`	`false`	Can’t be picked.

value

Type: string

Default: —

Required, unique in the list.

disabled

Type: boolean

Default: false

Can’t be picked.