Input

A text input for forms and user data entry, built on Base UI. Pair it with Field for a labeled, accessible form control.

Last updated August 7, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

import { Input } from "@/components/ui/input"
 
export function InputDemoExample() {
  return <Input type="email" placeholder="Email" className="max-w-xs" />
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/input.json

Usage

import { Input } from "@/components/ui/input"
 
export function Example() {
  return <Input placeholder="Enter your name" />
}

Basic

import { Input } from "@/components/ui/input"
 
export function InputBasicExample() {
  return <Input placeholder="Enter your name" className="max-w-xs" />
}

Field

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

We'll never share your email.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputFieldExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="input-field-email">Email</FieldLabel>
      <Input id="input-field-email" type="email" placeholder="you@example.com" />
      <FieldDescription>We&apos;ll never share your email.</FieldDescription>
    </Field>
  )
}

Field Group

Use FieldGroup to show multiple Field blocks and build forms.

Name

We'll never share your email.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputFieldGroupExample() {
  return (
    <FieldGroup className="max-w-xs">
      <Field>
        <FieldLabel htmlFor="input-fg-name">Name</FieldLabel>
        <Input id="input-fg-name" placeholder="Jane Doe" />
      </Field>
      <Field>
        <FieldLabel htmlFor="input-fg-email">Email</FieldLabel>
        <Input id="input-fg-email" type="email" placeholder="you@example.com" />
        <FieldDescription>We&apos;ll never share your email.</FieldDescription>
      </Field>
    </FieldGroup>
  )
}

Disabled

Use the disabled prop to disable the input. Add data-disabled to Field to style the disabled label and description too.

import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputDisabledExample() {
  return (
    <Field data-disabled className="max-w-xs">
      <FieldLabel htmlFor="input-disabled">Email</FieldLabel>
      <Input id="input-disabled" placeholder="you@example.com" disabled />
    </Field>
  )
}

Invalid

Use aria-invalid to mark the input as invalid, and data-invalid on Field to style the invalid label.

Enter a valid email address.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputInvalidExample() {
  return (
    <Field data-invalid className="max-w-xs">
      <FieldLabel htmlFor="input-invalid">Email</FieldLabel>
      <Input id="input-invalid" aria-invalid defaultValue="not-an-email" />
      <FieldDescription>Enter a valid email address.</FieldDescription>
    </Field>
  )
}

File

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

Resume

import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputFileExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="input-file">Resume</FieldLabel>
      <Input id="input-file" type="file" />
    </Field>
  )
}

Inline

Use Field with orientation="horizontal" to create an inline input, paired with Button for a search field.

import { Button } from "@/components/ui/button"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputInlineExample() {
  return (
    <Field orientation="horizontal" className="max-w-xs">
      <FieldLabel htmlFor="input-inline" className="sr-only">
        Search
      </FieldLabel>
      <Input id="input-inline" placeholder="Search components" />
      <Button variant="outline">Search</Button>
    </Field>
  )
}

Grid

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

First name

Last name

import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputGridExample() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-4">
      <Field>
        <FieldLabel htmlFor="input-grid-first">First name</FieldLabel>
        <Input id="input-grid-first" placeholder="Jane" />
      </Field>
      <Field>
        <FieldLabel htmlFor="input-grid-last">Last name</FieldLabel>
        <Input id="input-grid-last" placeholder="Doe" />
      </Field>
    </div>
  )
}

Required

Use the required attribute to indicate required inputs.

import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputRequiredExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="input-required">
        Email <span aria-hidden="true">*</span>
      </FieldLabel>
      <Input id="input-required" type="email" required />
    </Field>
  )
}

Badge

Use Badge in the label to highlight a recommended field.

UsernameRecommended

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputBadgeExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="input-badge">
        Username
        <Badge variant="secondary">Recommended</Badge>
      </FieldLabel>
      <Input id="input-badge" placeholder="jane_doe" />
    </Field>
  )
}

Input Group

To add icons, text, or buttons inside an input, use InputGroup.

import { SearchIcon } from "lucide-react"
 
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
 
export function InputInputGroupExample() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput placeholder="Search components" />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
    </InputGroup>
  )
}

Button Group

To add buttons to an input, use ButtonGroup.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"
 
export function InputButtonGroupExample() {
  return (
    <ButtonGroup className="max-w-xs">
      <Input placeholder="Search components" />
      <Button variant="outline">Search</Button>
    </ButtonGroup>
  )
}

Form

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

"use client"
 
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
 
export function InputFormExample() {
  return (
    <form className="w-full max-w-sm" onSubmit={(e) => e.preventDefault()}>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="input-form-name">Name</FieldLabel>
          <Input id="input-form-name" placeholder="Jane Doe" required />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-form-email">Email</FieldLabel>
          <Input
            id="input-form-email"
            type="email"
            placeholder="you@example.com"
            required
          />
          <FieldDescription>We&apos;ll never share your email.</FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-form-country">Country</FieldLabel>
          <Select defaultValue="ir">
            <SelectTrigger id="input-form-country">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ir">Iran</SelectItem>
              <SelectItem value="us">United States</SelectItem>
              <SelectItem value="de">Germany</SelectItem>
            </SelectContent>
          </Select>
        </Field>
        <Button type="submit">Submit</Button>
      </FieldGroup>
    </form>
  )
}

RTL

ایمیل

ایمیل شما با کسی به اشتراک گذاشته نمی‌شود.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
 
export function InputRtlExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="input-rtl">ایمیل</FieldLabel>
      <Input id="input-rtl" type="email" placeholder="you@example.com" />
      <FieldDescription>ایمیل شما با کسی به اشتراک گذاشته نمی‌شود.</FieldDescription>
    </Field>
  )
}

API Reference

Input

Prop	Type	Default	Description
type	string	"text"	The native input type, e.g. text, email, file, password.
disabled	boolean	false	Prevents interaction and dims the input.
required	boolean	false	Marks the input as required for form submission.

Field

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"	The layout flow direction of the field.
disabled	boolean	false	Marks the field's label and description as disabled.

FieldLabel

Prop	Type	Default	Description
htmlFor	string	undefined	The id of the associated control.

Edit this page on GitHub

PreviousEmpty NextInput Group