Foundations

Components

A premium option picker combining bits-ui accessibility standards with custom glassmorphic trigger buttons and slide-out dropdown menus.

bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/select.json

An option selection popup listing ice cream flavors.

Selected flavor: vanilla

Background

The best practices when using select controls.

Add descriptive placeholders when no value is chosen.
Limit the number of dropdown options to prevent vertical viewport overflow. For large option sets, prefer a Sheet with a searchable list.
Use clear, descriptive labels for each option instead of short abbreviations.
For simple binary choices, consider a Switch or Button Group as a more compact alternative.

Select sub-components and customization parameters.

Component / Prop	Type / Role	Default	Description
Select.Root	Context coordinator	-	The master coordinator. Connects option items, active triggers, and keyboard focus states.
Select.Trigger	Tactile button trigger	-	The tactile button displaying the selected option label that slides out the item picker list on clicking.
Select.Content	Popover container	-	The floating glass card enclosing option items, styled with backdrop filters and shadows.
Select.Item	Option element	-	Clickable option element. Automatically appends trailing checkmarks when selected.
value	string	""	Two-way bindable selected value.
liquidGlass	boolean	false	Enables physical liquid glass refraction distortion (Chromium only).

Give feedback