Select

A custom select component for selecting a value from a list of options.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add select

Variants & Examples

Default Select

A basic select component for choosing an option from a dropdown list.

Code for Default Select

1import {
2  Select,
3  SelectContent,
4  SelectGroup,
5  SelectItem,
6  SelectLabel,
7  SelectTrigger,
8  SelectValue,
9} from "@/components/ui/select"
10
11export function DefaultSelect() {
12  return (
13    <Select>
14      <SelectTrigger className="w-[180px]">
15        <SelectValue placeholder="Select a fruit" />
16      </SelectTrigger>
17      <SelectContent>
18        <SelectGroup>
19          <SelectLabel>Fruits</SelectLabel>
20          <SelectItem value="apple">Apple</SelectItem>
21          <SelectItem value="banana">Banana</SelectItem>
22          <SelectItem value="blueberry">Blueberry</SelectItem>
23          <SelectItem value="grapes">Grapes</SelectItem>
24          <SelectItem value="pineapple">Pineapple</SelectItem>
25        </SelectGroup>
26      </SelectContent>
27    </Select>
28  )
29}

Props

These are the available props for the Select component:

Prop	Type	Description	Default
defaultValue	string	The value of the item that should be selected when initially rendered.	-
value	string	The controlled value of the selected item.	-
onValueChange	(value: string) => void	Event handler called when the value changes.	-
disabled	boolean	Whether the select is disabled.	false