Shadcn Input

The shadcn input is a styled native <input>. Focus it and type — the ring and file button come with the class. Use it for emails, names, search, and file picks. If the answer is a paragraph, that is a Textarea.

Usage

import { Input } from "@/components/ui/input"

<Input type="email" placeholder="Email" />

type picks the keyboard. disabled greys it out. aria-invalid is the red border.

Composition

Pair it with Field for the label, hint, and error.

Basic

A bare input. The placeholder is the only hint.

Field

Field, FieldLabel, and FieldDescription — the label, the box, and the hint.

Field Group

FieldGroup stacks fields. Reset and submit sit on a horizontal Field.

Disabled

disabled on the input. data-disabled on Field so the label greys out with it.

Invalid

aria-invalid on the input. data-invalid on Field so the label goes red too.

File

type="file" — the native picker, same border as the rest.

Inline

orientation="horizontal" plus a Button. Search and go.

Grid

Two columns. First name and last name share a row.

Required

required on the input. Mark the label with a * so people see it before submit.

Badge

A Badge in the label — recommended, beta, optional.

Input Group

Icons and prefixes go in Input Group, not absolute-positioned on the input.

Button Group

Button Group joins the field and the action with no gap.

Form

Inside a Field on a real form. The label and the error stay with the input.

RTL

Wrap with DirectionProvider and dir="rtl". Labels stay Arabic.

API

Every native <input> prop works — value, defaultValue, onChange, name, id.

Notes

Prefixes and icons belong in Input Group, not absolute on the input.

With other components

Questions

Related