Select

Custom select dropdown with dot notation and composable options.

Preview

Installation

npx drivn add select

Usage

1 import { useState } from "react"
2 import { Select } from "@/components/ui/select"
3 
4 const options = [
5   { label: "React", value: "react" },
6   { label: "Vue", value: "vue" },
7   { label: "Svelte", value: "svelte" },
8 ]
9 
10 export default function Page() {
11   const [value, setValue] = useState("")
12 
13   return (
14     <Select value={value} onChange={setValue}>
15       <Select.Trigger placeholder="Pick a framework">
16         {options.find(o => o.value === value)?.label}
17       </Select.Trigger>
18       <Select.Menu>
19         {options.map(o => (
20           <Select.Option key={o.value} value={o.value}>
21             {o.label}
22           </Select.Option>
23         ))}
24       </Select.Menu>
25     </Select>
26   )
27 }

API Reference

Select

Prop	Type	Default	Description
`value`	string	—	Currently selected value
`onChange`	(value: string) => void	—	Callback fired when the selected value changes
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Select sub-components (Trigger, Menu, Option)

Select.Option

Prop	Type	Default	Description
`value`	string	—	The value associated with this option
`children`	ReactNode	—	Label content for the option

1	import { useState } from "react"
2	import { Select } from "@/components/ui/select"
3
4	const options = [
5	{ label: "React", value: "react" },
6	{ label: "Vue", value: "vue" },
7	{ label: "Svelte", value: "svelte" },
8	]
9
10	export default function Page() {
11	const [value, setValue] = useState("")
12
13	return (
14	<Select value={value} onChange={setValue}>
15	<Select.Trigger placeholder="Pick a framework">
16	{options.find(o => o.value === value)?.label}
17	</Select.Trigger>
18	<Select.Menu>
19	{options.map(o => (
20	<Select.Option key={o.value} value={o.value}>
21	{o.label}
22	</Select.Option>
23	))}
24	</Select.Menu>
25	</Select>
26	)
27	}