Select

Displays a list of options for the user to pick from—triggered by a button.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/select

Lineage

Spoke

Anatomy

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

export default () => (
	<Select>
		<SelectTrigger>
			<SelectValue />
		</SelectTrigger>
		<SelectContent>
			<SelectItem />
		</SelectContent>
	</Select>
)

Spoke utility classes

Class	Fallback chain	Description
`--select-radius`	`var(--input-radius, var(--radius-md))`	Border radius for select
`--select-border`	`var(--input-border, var(--input))`	Border colour for select
`--select-background`	`var(--input-background, transparent)`	Background colour for select
`--shadow-select`	`var(--input-shadow, var(--shadow-xs))`	Box shadow for select
`--select-content-radius`	`var(--radius-md)`	Border radius for content
`--select-content`	`var(--popover)`	Colour for content select variant
`--select-content-foreground`	`var(--popover-foreground)`	Text/icon colour for content select variant
`--select-item-focus`	`var(--accent)`	Colour for item focus select variant
`--select-item-focus-foreground`	`var(--accent-foreground)`	Text/icon colour for item focus select variant