114k
New

Input

PreviousNext

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

Radix UIBase UI
Radix UI

Your API key is encrypted and stored securely.

import {
  Field,
  FieldDescription,

Installation

pnpm dlx shadcn@latest add input

Usage

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

Examples

Basic

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

export function InputBasic() {

Field

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

Choose a unique username for your account.

import {
  Field,
  FieldDescription,

Field Group

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

We'll send updates to this address.

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

Disabled

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

This field is currently disabled.

import {
  Field,
  FieldDescription,

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.

This field contains validation errors.

import {
  Field,
  FieldDescription,

File

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

Select a picture to upload.

import {
  Field,
  FieldDescription,

Inline

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

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

Grid

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

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

Required

Use the required attribute to indicate required inputs.

This field must be filled out.

import {
  Field,
  FieldDescription,

Badge

Use Badge in the label to highlight a recommended field.

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

Input Group

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

https://
import { InfoIcon } from "lucide-react"

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

Button Group

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

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

Form

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

We'll never share your email with anyone.

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

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

مفتاح API الخاص بك مشفر ومخزن بأمان.

"use client"

import * as React from "react"