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 January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/input

Usage

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

Examples

Basic

Field

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

Field Group

Use FieldGroup to show multiple Field blocks and build forms.

Disabled

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

Invalid

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

File

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

Inline

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

Grid

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

Required

Use the required attribute to indicate required inputs.

Badge

Use Badge in the label to highlight a recommended field.

Input Group

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

Button Group

To add buttons to an input, use ButtonGroup.

Form

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

RTL

API Reference