For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Input

PreviousNext

Displays a form input field or a component that looks like an input field.

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

export function InputDemo() {
  return <Input placeholder="Email" style={{ maxWidth: 280 }} type="email" />;
}

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/input.json

Usage

import { Input } from "@/components/ui/input/input";
<Input type="email" placeholder="Email" />

Examples

Basic

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

export function InputBasic() {
  return <Input placeholder="Enter text" />;
}

Label

Pair the input with a label element.

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

export function InputLabel() {
  return (
    <div
      style={{

Field

Compose the input with a Field for labels and descriptions.

Choose a unique username for your account.

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

Field Group

We'll send updates to this address.

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,

Disabled

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

export function InputDisabled() {
  return (
    <Input
      disabled

Invalid

This field contains validation errors.

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

File

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

export function InputFile() {
  return (
    <div
      style={{

Inline

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

export function InputInline() {
  return (

Grid

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

Required

This field must be filled out.

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

Badge

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

export function InputBadge() {
  return (

Button Group

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

export function InputButtonGroup() {

Input Group

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

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

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import { Input } from "@/components/ui/input";