Select
FormsOpens a list of options from a trigger and stores one selected value.
Try it
Add to your project
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/select.jsonThe command includes the component’s shared dependencies. Your project keeps editable source files.
Include the complete example
This example also composes typography. Install its parts together:
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/select.json https://luv-jeri.github.io/cojeev-ui/r/typography.jsonUsing select
Items show stable, varied blob adornments by default. Set adornment={false} to hide, supply {shape,color,icon,effect}, or pass a custom icon element.
Compose SelectTrigger, SelectValue, SelectContent, and value-based SelectItem parts.
Use value and onValueChange for controlled state, and groups or labels to organize a longer list.
SelectItem shows a persistent selected check separately from hover or keyboard emphasis. Set showIndicator=false to suppress that mark.
API
Compose the exported parts below. The prop types are read from the React source during the registry build.
Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.
SelectProps
| Prop | Type | Required |
|---|---|---|
containerProps | React.ComponentProps<"span"> | No |
SelectTriggerProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectValueProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectContentProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectItemProps
| Prop | Type | Required |
|---|---|---|
showIndicator | boolean | No |
SelectGroupProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectLabelProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectSeparatorProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectScrollUpButtonProps
Accepts the native or primitive props declared by its exported TypeScript type.
SelectScrollDownButtonProps
Accepts the native or primitive props declared by its exported TypeScript type.
Accessibility
Associate a visible label with the trigger and retain the supplied item parts for keyboard navigation and selection announcements.
States and appearance
For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.
Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.