---
title: "Select"
description: "A dropdown wired to its label, hint, and error text."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/select"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/select.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Select

A dropdown wired to its label, hint, and error text.

```tsx
import { Select } from "@sanity/sanity-id/components/select"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | — | Unique select ID; connects the select to its label element |
| `error` | `ReactNode` | no | — | Error message displayed below the select |
| `hint` | `ReactNode` | no | — | Hint text displayed below the label |
| `label` | `ReactNode` | no | — | Label displayed above the select |

Also accepts every prop of `ComponentProps<"select">`.

## Usage

```tsx
import { Select } from "@sanity/sanity-id/components/select"
import * as React from "react"

export default () => {
	const exampleOptions = (
		<React.Fragment>
			<option disabled value="">Select fruit</option>
			<option value="apples">Apples</option>
			<option value="bananas">Bananas</option>
			<option value="oranges">Oranges</option>
		</React.Fragment>
	)
	return (
		<div className="flex flex-col gap-32 max-w-md">
			<Select id="select-example-1" defaultValue="">
				{exampleOptions}
			</Select>
			<Select
				id="select-example-3"
				defaultValue=""
				label="Select with label"
				required
			>
				{exampleOptions}
			</Select>
			<Select
				id="select-example-4"
				defaultValue=""
				label="Optional select with label"
			>
				{exampleOptions}
			</Select>
			<Select
				id="select-example-5"
				defaultValue=""
				label="Select with long label. Non amet veniam laborum nisi laboris occaecat esse"
			>
				{exampleOptions}
			</Select>
			<Select
				id="select-example-6"
				defaultValue=""
				label="Select with hint"
				hint="Laboris cupidatat in cupidatat incididunt"
				required
			>
				{exampleOptions}
			</Select>
			<Select
				id="select-example-7"
				defaultValue=""
				label="Select with long hint"
				hint="Velit nulla ex commodo id ipsum reprehenderit aliquip excepteur pariatur ex Lorem deserunt dolore sint officia"
				required
			>
				{exampleOptions}
			</Select>
			<Select
				id="select-example-8"
				defaultValue=""
				label="Select with error"
				error="Enim sunt fugiat nostrud amet cupidatat"
				required
			>
				{exampleOptions}
			</Select>
			<Select
				id="select-example-9"
				defaultValue=""
				label="Select with long error"
				error="Cupidatat eu aute Lorem dolor ea eiusmod sint nisi elit dolore commodo quis irure tempor cupidatat cillum fugiat aliqua"
				required
			>
				{exampleOptions}
			</Select>
		</div>
	)
}
```