Input

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

Radix UI Base UI

Installation

Hover Card Input Group

On This Page

Installation Usage Examples Basic Field Field Group Disabled Invalid File Inline Grid Required Badge Input Group Button Group Form

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add input

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

<Input />

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

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

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

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.

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

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

Use the required attribute to indicate required inputs.

Use Badge in the label to highlight a recommended field.

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

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

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

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

export function InputBasic() {

import { Button } from "@/components/ui/button"
import {
  Field,

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Field, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

import { Button } from "@/components/ui/button"
import {
  Field,