Select

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

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

Props

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

Select props
Prop	Type	Description
`id` (required)	`string`	Unique select ID; connects the select to its label element
`error`	`ReactNode`	Error message displayed below the select
`hint`	`ReactNode`	Hint text displayed below the label
`label`	`ReactNode`	Label displayed above the select

Required.

Usage

Select with label

Optional select with labelOptional

Select with long label. Non amet veniam laborum nisi laboris occaecat esseOptional

Select with hint

Laboris cupidatat in cupidatat incididunt

Select with long hint

Velit nulla ex commodo id ipsum reprehenderit aliquip excepteur pariatur ex Lorem deserunt dolore sint officia

Select with error

Enim sunt fugiat nostrud amet cupidatat

Select with long error

Cupidatat eu aute Lorem dolor ea eiusmod sint nisi elit dolore commodo quis irure tempor cupidatat cillum fugiat aliqua

1import { Select } from "@sanity/sanity-id/components/select"
2import * as React from "react"
3
4export default () => {
5        const exampleOptions = (
6          <React.Fragment>
7            <option disabled value="">Select fruit</option>
8            <option value="apples">Apples</option>
9            <option value="bananas">Bananas</option>
10            <option value="oranges">Oranges</option>
11          </React.Fragment>
12        )
13        return (
14          <div className="flex flex-col gap-32 max-w-md">
15            <Select id="select-example-1" defaultValue="">
16              {exampleOptions}
17            </Select>
18            <Select
19              id="select-example-3"
20              defaultValue=""
21              label="Select with label"
22              required
23            >
24              {exampleOptions}
25            </Select>
26            <Select
27              id="select-example-4"
28              defaultValue=""
29              label="Optional select with label"
30            >
31              {exampleOptions}
32            </Select>
33            <Select
34              id="select-example-5"
35              defaultValue=""
36              label="Select with long label. Non amet veniam laborum nisi laboris occaecat esse"
37            >
38              {exampleOptions}
39            </Select>
40            <Select
41              id="select-example-6"
42              defaultValue=""
43              label="Select with hint"
44              hint="Laboris cupidatat in cupidatat incididunt"
45              required
46            >
47              {exampleOptions}
48            </Select>
49            <Select
50              id="select-example-7"
51              defaultValue=""
52              label="Select with long hint"
53              hint="Velit nulla ex commodo id ipsum reprehenderit aliquip excepteur pariatur ex Lorem deserunt dolore sint officia"
54              required
55            >
56              {exampleOptions}
57            </Select>
58            <Select
59              id="select-example-8"
60              defaultValue=""
61              label="Select with error"
62              error="Enim sunt fugiat nostrud amet cupidatat"
63              required
64            >
65              {exampleOptions}
66            </Select>
67            <Select
68              id="select-example-9"
69              defaultValue=""
70              label="Select with long error"
71              error="Cupidatat eu aute Lorem dolor ea eiusmod sint nisi elit dolore commodo quis irure tempor cupidatat cillum fugiat aliqua"
72              required
73            >
74              {exampleOptions}
75            </Select>
76          </div>
77        )
78      }