Select
A dropdown select input built on Base UI
Installation
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/select.jsonnpx shadcn@latest add https://prototyper-ui.com/r/select.jsonyarn dlx shadcn@latest add https://prototyper-ui.com/r/select.jsonbunx --bun shadcn@latest add https://prototyper-ui.com/r/select.jsonThis will add the following files to your project:
components/ui/select.tsx
Usage
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/ui/select"
<Select>
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option-1">Option 1</SelectItem>
<SelectItem value="option-2">Option 2</SelectItem>
</SelectContent>
</Select>Anatomy
<Select>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel />
<SelectItem />
</SelectGroup>
<SelectSeparator />
</SelectContent>
</Select>| Sub-component | data-slot | Purpose | Required |
|---|---|---|---|
Select | select | Root provider, manages selection state | Yes |
SelectTrigger | select-trigger | Button that opens the dropdown | Yes |
SelectValue | select-value | Displays the currently selected value | Yes |
SelectContent | select-content | Popup container for items | Yes |
SelectItem | select-item | An individual selectable option | Yes |
SelectGroup | select-group | Groups related items together | No |
SelectLabel | select-label | Label for a group of items | No |
SelectSeparator | select-separator | Visual divider between items or groups | No |
SelectScrollUpButton | select-scroll-up-button | Scroll indicator at the top of the list | No |
SelectScrollDownButton | select-scroll-down-button | Scroll indicator at the bottom of the list | No |
Examples
Content
Description
Disabled
Disabled Items
Links
Reusable
Sections
Sections Dynamic
Text Slots
Validation
Styling
Data Slots
Use data-slot attributes to target specific parts of the select:
| Slot name | Element |
|---|---|
select | Root provider |
select-trigger | The trigger button |
select-value | Displayed selected value text |
select-content | The dropdown popup panel |
select-item | An individual option |
select-group | Group wrapper for related items |
select-label | Label for a group |
select-separator | Visual divider |
select-scroll-up-button | Top scroll indicator |
select-scroll-down-button | Bottom scroll indicator |
Customization Examples
/* Make the trigger wider */
[data-slot="select-trigger"] {
@apply w-64;
}
/* Custom highlight color for items */
[data-slot="select-item"][data-highlighted] {
@apply bg-primary text-primary-foreground;
}{/* Override trigger size via className */}
<SelectTrigger className="w-80">
<SelectValue placeholder="Choose..." />
</SelectTrigger>API Reference
Select
Root component that manages selection state and context.
Prop
Type
All Base UI Select.Root props are forwarded via ...props.
SelectTrigger
Button that opens the dropdown when clicked.
Prop
Type
All Base UI Select.Trigger props are forwarded via ...props.
SelectValue
Displays the currently selected value or a placeholder.
Prop
Type
All Base UI Select.Value props are forwarded via ...props.
SelectContent
The dropdown popup panel rendered inside a portal with positioning.
Prop
Type
All Base UI Select.Popup props are forwarded via ...props.
SelectItem
An individual selectable option within the dropdown.
Prop
Type
All Base UI Select.Item props are forwarded via ...props.
SelectGroup
Groups related items together with optional label.
Prop
Type
All Base UI Select.Group props are forwarded via ...props.
SelectLabel
Label for a group of items.
Prop
Type
All Base UI Select.GroupLabel props are forwarded via ...props.
SelectSeparator
Visual divider between items or groups.
Prop
Type
All Base UI Select.Separator props are forwarded via ...props.
SelectScrollUpButton
Scroll indicator at the top of the dropdown list.
Prop
Type
All Base UI Select.ScrollUpArrow props are forwarded via ...props.
SelectScrollDownButton
Scroll indicator at the bottom of the dropdown list.
Prop
Type
All Base UI Select.ScrollDownArrow props are forwarded via ...props.
selectTriggerVariants
A cva helper exported for use outside of the <SelectTrigger> component (e.g., applying select trigger styles to custom elements).
import { selectTriggerVariants } from "@/components/ui/select"
<div className={selectTriggerVariants({ size: "sm" })}>Custom trigger</div>Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
Space | Opens the dropdown or selects the highlighted item |
Enter | Opens the dropdown or selects the highlighted item |
ArrowDown | Opens the dropdown or moves highlight to the next item |
ArrowUp | Opens the dropdown or moves highlight to the previous item |
Home | Moves highlight to the first item |
End | Moves highlight to the last item |
Escape | Closes the dropdown |
Tab | Closes the dropdown and moves focus to the next element |
ARIA Attributes
- The trigger renders with
role="combobox"andaria-haspopup="listbox". aria-expandedis set totruewhen the dropdown is open.- The popup receives
role="listbox". - Each item receives
role="option"witharia-selectedindicating the current selection. aria-disabledis set on disabled items.- Screen readers announce the currently selected value from the trigger.
Stream UI
This component is available in @prototyperai/stream-ui.
Catalog Definition
import { z } from "zod"
import { defineComponent } from "@prototyperai/stream-ui/catalog"
export default defineComponent({
description: "A dropdown select field for choosing from a list of options",
props: z.object({
label: z.string().optional().describe("Label displayed above the select"),
placeholder: z.string().optional().describe("Placeholder text when no value is selected"),
options: z
.array(
z.object({
label: z.string().describe("Display text for the option"),
value: z.string().describe("Value of the option"),
}),
)
.describe("List of selectable options"),
value: z.string().optional().describe("Currently selected value"),
disabled: z.boolean().optional().describe("Whether the select is disabled"),
}),
events: ["change"],
example: {
label: "Country",
placeholder: "Select a country...",
options: [
{ label: "United States", value: "us" },
{ label: "Canada", value: "ca" },
{ label: "United Kingdom", value: "uk" },
],
},
})Example Spec
{
"root": "countrySelect",
"elements": {
"countrySelect": {
"type": "Select",
"props": {
"label": "Country",
"placeholder": "Select a country...",
"options": [
{ "label": "United States", "value": "us" },
{ "label": "Canada", "value": "ca" },
{ "label": "United Kingdom", "value": "uk" }
]
},
"$bindState": { "path": "/country", "event": "change" }
}
}
}Learn more in the Stream UI documentation.