Select

Select field with configurable options, validation state, and label.

Installation

bash

pnpm dlx shadcn@latest add @cs/select

Usage

tsx

import { Select } from "@/components/cs/select";

tsx

<Select name="role" label="Role" options={[{ id: "admin", name: "Admin" }, { id: "member", name: "Member" }]} />

Grouped options

A select menu that organizes related options under descriptive labels.

tsx

import { Select } from "@/registry/cs/ui/select"
import { PreviewPanel } from "./preview-utils"

export default function SelectGroupsPreview() {
	return (
		<PreviewPanel>
			<Select
				name="assignee"
				label="Assignee"
				placeholder="Choose an assignee"
				className="w-64"
				options={[
					{
						label: "Design",
						options: [
							{ id: "maya", name: "Maya Chen" },
							{ id: "noah", name: "Noah Williams" },
						],
					},
					{
						label: "Engineering",
						options: [
							{ id: "sasha", name: "Sasha Ivanov" },
							{ id: "liam", name: "Liam Patel" },
						],
					},
				]}
			/>
		</PreviewPanel>
	)
}

API Reference

SelectOption

tsx

type SelectOption = { id: TValue | null; name: ReactNode }

LegacySelectOption

tsx

type LegacySelectOption = { value: TValue | null; label: ReactNode }

SelectOptionsGroup

tsx

type SelectOptionsGroup = {
	/** Group label displayed above the options. */
	label: string
	/** Options rendered in the select menu. */
	options: SelectOption<TValue>[] | LegacySelectOption<TValue>[]
}

Select

Select field with configurable options, validation state, and label.

Props

Name	Type	Default	Description
defaultValue	TValue \| null	-	Initial selected value for uncontrolled usage.
error	string \| null	-	Validation error message for the field.
label	string	-	Visible field label.
name	string	-	Form field name used for submission and validation errors.
onValueChange	((value: TValue \| null) => void) \| undefined	-	Called when the selected value changes.
options *	SelectOption<TValue>[] \| LegacySelectOption<TValue>[] \| SelectOptionsGroup<TValue>[]	-	Options rendered in the select menu.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	"vertical"	-
placeholder	string	-	Text displayed when no option is selected.
required	boolean	-	Requires a selected value before the form can submit.
selectClassName	string	-	Additional classes applied to the select trigger.
value	TValue \| null	-	Controlled selected value.

Dependencies

@base-ui/react cn @cs/field @shadcn/field @shadcn/select @shadcn/utils