Input

A text input component for forms and user data entry with built-in styling and accessibility features.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputDemo() {
5
  return (
6
    <Field>
7
      <FieldLabel for="input-demo-api-key">API Key</FieldLabel>
8
      <Input id="input-demo-api-key" type="password" placeholder="sk-..." />
9
      <FieldDescription>Your API key is encrypted and stored securely.</FieldDescription>
10
    </Field>
11
  );
12
}

Installation

pnpm dlx shadcn@latest add @zaidan/input
npx shadcn@latest add @zaidan/input
yarn dlx shadcn@latest add @zaidan/input
bunx --bun shadcn@latest add @zaidan/input

Usage

1
import { Input } from "~/components/ui/input";

1
<Input />

Basic

1
import { Input } from "~/components/ui/input";
2

3
export default function InputBasic() {
4
  return <Input placeholder="Enter text" />;
5
}

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputField() {
5
  return (
6
    <Field>
7
      <FieldLabel for="input-field-username">Username</FieldLabel>
8
      <Input id="input-field-username" type="text" placeholder="Enter your username" />
9
      <FieldDescription>Choose a unique username for your account.</FieldDescription>
10
    </Field>
11
  );
12
}

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

1
import { Button } from "~/components/ui/button";
2
import { Field, FieldDescription, FieldGroup, FieldLabel } from "~/components/ui/field";
3
import { Input } from "~/components/ui/input";
4

5
export default function InputFieldgroup() {
6
  return (
7
    <FieldGroup>
8
      <Field>
9
        <FieldLabel for="fieldgroup-name">Name</FieldLabel>
10
        <Input id="fieldgroup-name" placeholder="Jordan Lee" />
11
      </Field>
12
      <Field>
13
        <FieldLabel for="fieldgroup-email">Email</FieldLabel>
14
        <Input id="fieldgroup-email" type="email" placeholder="name@example.com" />
15
        <FieldDescription>We'll send updates to this address.</FieldDescription>
16
      </Field>
17
      <Field orientation="horizontal">
18
        <Button type="reset" variant="outline">
19
          Reset
20
        </Button>
21
        <Button type="submit">Submit</Button>
22
      </Field>
23
    </FieldGroup>
24
  );
25
}

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputDisabled() {
5
  return (
6
    <Field data-disabled>
7
      <FieldLabel for="input-demo-disabled">Email</FieldLabel>
8
      <Input id="input-demo-disabled" type="email" placeholder="Email" disabled />
9
      <FieldDescription>This field is currently disabled.</FieldDescription>
10
    </Field>
11
  );
12
}

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputInvalid() {
5
  return (
6
    <Field data-invalid>
7
      <FieldLabel for="input-invalid">Invalid Input</FieldLabel>
8
      <Input id="input-invalid" placeholder="Error" aria-invalid />
9
      <FieldDescription>This field contains validation errors.</FieldDescription>
10
    </Field>
11
  );
12
}

File

Use the type="file" prop to create a file input.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputFile() {
5
  return (
6
    <Field>
7
      <FieldLabel for="picture">Picture</FieldLabel>
8
      <Input id="picture" type="file" />
9
      <FieldDescription>Select a picture to upload.</FieldDescription>
10
    </Field>
11
  );
12
}

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

1
import { Button } from "~/components/ui/button";
2
import { Field } from "~/components/ui/field";
3
import { Input } from "~/components/ui/input";
4

5
export default function InputInline() {
6
  return (
7
    <Field orientation="horizontal">
8
      <Input type="search" placeholder="Search..." />
9
      <Button>Search</Button>
10
    </Field>
11
  );
12
}

Grid

Use a grid layout to place multiple inputs side by side.

1
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputGrid() {
5
  return (
6
    <FieldGroup class="grid max-w-sm grid-cols-2">
7
      <Field>
8
        <FieldLabel for="first-name">First Name</FieldLabel>
9
        <Input id="first-name" placeholder="Jordan" />
10
      </Field>
11
      <Field>
12
        <FieldLabel for="last-name">Last Name</FieldLabel>
13
        <Input id="last-name" placeholder="Lee" />
14
      </Field>
15
    </FieldGroup>
16
  );
17
}

Required

Use the required attribute to indicate required inputs.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { Input } from "~/components/ui/input";
3

4
export default function InputRequired() {
5
  return (
6
    <Field>
7
      <FieldLabel for="input-required">
8
        Required Field <span class="text-destructive">*</span>
9
      </FieldLabel>
10
      <Input id="input-required" placeholder="This field is required" required />
11
      <FieldDescription>This field must be filled out.</FieldDescription>
12
    </Field>
13
  );
14
}

Badge

Use Badge in the label to highlight a recommended field.

1
import { Badge } from "~/components/ui/badge";
2
import { Field, FieldLabel } from "~/components/ui/field";
3
import { Input } from "~/components/ui/input";
4

5
export default function InputBadge() {
6
  return (
7
    <Field>
8
      <FieldLabel for="input-badge">
9
        Webhook URL{" "}
10
        <Badge variant="secondary" class="ml-auto">
11
          Beta
12
        </Badge>
13
      </FieldLabel>
14
      <Input id="input-badge" type="url" placeholder="https://api.example.com/webhook" />
15
    </Field>
16
  );
17
}

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

1
import { InfoIcon } from "lucide-solid";
2

3
import { Field, FieldLabel } from "~/components/ui/field";
4
import {
5
  InputGroup,
6
  InputGroupAddon,
7
  InputGroupInput,
8
  InputGroupText,
9
} from "~/components/ui/input-group";
10

11
export default function InputInputGroup() {
12
  return (
13
    <Field>
14
      <FieldLabel for="input-group-url">Website URL</FieldLabel>
15
      <InputGroup>
16
        <InputGroupInput id="input-group-url" placeholder="example.com" />
17
        <InputGroupAddon>
18
          <InputGroupText>https://</InputGroupText>
19
        </InputGroupAddon>
20
        <InputGroupAddon align="inline-end">
21
          <InfoIcon />
22
        </InputGroupAddon>
23
      </InputGroup>
24
    </Field>
25
  );
26
}

Button Group

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

1
import { Button } from "~/components/ui/button";
2
import { ButtonGroup } from "~/components/ui/button-group";
3
import { Field, FieldLabel } from "~/components/ui/field";
4
import { Input } from "~/components/ui/input";
5

6
export default function InputButtonGroup() {
7
  return (
8
    <Field>
9
      <FieldLabel for="input-button-group">Search</FieldLabel>
10
      <ButtonGroup>
11
        <Input id="input-button-group" placeholder="Type to search..." />
12
        <Button variant="outline">Search</Button>
13
      </ButtonGroup>
14
    </Field>
15
  );
16
}

Form

A full form example with multiple inputs, a select, and a button.

1
import { Button } from "~/components/ui/button";
2
import { Field, FieldDescription, FieldGroup, FieldLabel } from "~/components/ui/field";
3
import { Input } from "~/components/ui/input";
4
import {
5
  Select,
6
  SelectContent,
7
  SelectItem,
8
  SelectTrigger,
9
  SelectValue,
10
} from "~/components/ui/select";
11

12
const countries = [
13
  { label: "United States", value: "us" },
14
  { label: "United Kingdom", value: "uk" },
15
  { label: "Canada", value: "ca" },
16
];
17

18
export default function InputForm() {
19
  return (
20
    <form class="w-full max-w-sm">
21
      <FieldGroup>
22
        <Field>
23
          <FieldLabel for="form-name">Name</FieldLabel>
24
          <Input id="form-name" type="text" placeholder="Evil Rabbit" required />
25
        </Field>
26
        <Field>
27
          <FieldLabel for="form-email">Email</FieldLabel>
28
          <Input id="form-email" type="email" placeholder="john@example.com" />
29
          <FieldDescription>We'll never share your email with anyone.</FieldDescription>
30
        </Field>
31
        <div class="grid grid-cols-2 gap-4">
32
          <Field>
33
            <FieldLabel for="form-phone">Phone</FieldLabel>
34
            <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
35
          </Field>
36
          <Field>
37
            <FieldLabel for="form-country">Country</FieldLabel>
38
            <Select
39
              options={countries}
40
              optionValue="value"
41
              optionTextValue="label"
42
              defaultValue={countries[0]}
43
              itemComponent={(props) => (
44
                <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>
45
              )}
46
            >
47
              <SelectTrigger id="form-country">
48
                <SelectValue<(typeof countries)[number]>>
49
                  {(state) => state.selectedOption().label}
50
                </SelectValue>
51
              </SelectTrigger>
52
              <SelectContent />
53
            </Select>
54
          </Field>
55
        </div>
56
        <Field>
57
          <FieldLabel for="form-address">Address</FieldLabel>
58
          <Input id="form-address" type="text" placeholder="123 Main St" />
59
        </Field>
60
        <Field orientation="horizontal">
61
          <Button type="button" variant="outline">
62
            Cancel
63
          </Button>
64
          <Button type="submit">Submit</Button>
65
        </Field>
66
      </FieldGroup>
67
    </form>
68
  );
69
}

API Reference

Input is a styled native input element. See the HTML input element reference for its native props, keyboard behavior, and accessibility semantics.

Prop	Type	Default
`class`	`string`
`defaultValue`	`string`