Select

A dropdown select menu for choosing from a list of options. Supports option groups, search, and custom styling via Radix UI Select.

Preview

Default Select

Room Type

Usage

tsx

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

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a destination" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North India</SelectLabel>
      <SelectItem value="manali">Manali</SelectItem>
      <SelectItem value="rishikesh">Rishikesh</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>South India</SelectLabel>
      <SelectItem value="goa">Goa</SelectItem>
      <SelectItem value="kochi">Kochi</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Props

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the select.
`defaultValue`	`string`	—	The default value when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`placeholder`	`string`	—	Placeholder text shown when no value is selected.
`disabled`	`boolean`	false	Disables the select control.

value

Type: string

Default: —

The controlled value of the select.

defaultValue

Type: string

Default: —

The default value when uncontrolled.

onValueChange

Type: (value: string) => void

Default: —

Called when the value changes.

placeholder

Type: string

Default: —

Placeholder text shown when no value is selected.

disabled

Type: boolean

Default: false

Disables the select control.

Previous Label Next Checkbox