components

Select

Display a collapsible list of options and allows a user to select

Source CodeRadix UI

Installation



Usage


Imports


/components/ui/select.tsx
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"


Code


<Select>
	<SelectTrigger>
		<SelectValue />
	</SelectTrigger>
	<SelectContent>
		<SelectItem value="male">Male</SelectItem>
		<SelectItem value="female">Female</SelectItem>
	</SelectContent>
</Select>




Examples


Size




With Badge




With Avatar




Custom indicator




Indicator Position




Time Picker




Form


Choose your role in the system.


Props


<Select>
NameDefaultValues
indicatorPositionrightleftright
indicatornullReactNode
External Reference--
<SelectTrigger>
NameDefaultValues
sizemdsmmdlg
External Reference--
<SelectGroup>
NameDefaultValues
label-string
External Reference--