Input

A single-line text field wired to its label, hint, and error text. 

import { Input } from "@sanity/sanity-id/components/input"

Props

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

Input props
PropTypeDescription
id (required)string

Unique input ID; connects the input to its label element

errorReactNode

Error message displayed below the input

hintReactNode

Hint text displayed below the label

labelReactNode

Label displayed above the input

Required.

Usage

Laboris cupidatat in cupidatat incididunt

Consectetur elit irure non nulla mollit qui officia proident nostrud non aliqua. Ullamco quis deserunt ut enim deserunt do in mollit est est ea.

Enim sunt fugiat nostrud amet cupidatat

Do dolore culpa incididunt aute commodo cupidatat proident ea ipsum laborum aute amet elit. Dolore ipsum exercitation sit mollit occaecat amet duis sint consequat aute elit.

1import { Input } from "@sanity/sanity-id/components/input"
2
3export default () => {
4        return (
5          <div className="flex flex-col gap-32 max-w-md">
6            <Input id="input-example-1" />
7            <Input id="input-example-2" placeholder="Input with placeholder" />
8            <Input id="input-example-3" label="Input with label" required />
9            <Input id="input-example-4" label="Optional input with label" />
10            <Input
11              id="input-example-5"
12              label="Input with long label. Velit excepteur sint nulla est dolore reprehenderit officia sint velit dolor"
13            />
14            <Input
15              id="input-example-6"
16              label="Input with hint"
17              hint="Laboris cupidatat in cupidatat incididunt"
18              required
19            />
20            <Input
21              id="input-example-7"
22              label="Input with long hint"
23              hint="Consectetur elit irure non nulla mollit qui officia proident nostrud non aliqua. Ullamco quis deserunt ut enim deserunt do in mollit est est ea."
24              required
25            />
26            <Input
27              id="input-example-8"
28              label="Input with error"
29              error="Enim sunt fugiat nostrud amet cupidatat"
30              required
31            />
32            <Input
33              id="input-example-9"
34              label="Input with long error"
35              error="Do dolore culpa incididunt aute commodo cupidatat proident ea ipsum laborum aute amet elit. Dolore ipsum exercitation sit mollit occaecat amet duis sint consequat aute elit."
36              required
37            />
38          </div>
39        )
40      }