║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

[Input: email, Placeholder: Email] Copy

import { Input } from "@/components/ui/input"
export function InputDemo() {
  return <Input type="email" placeholder="Email" />
}

Installation

CLIManual

[pnpm](#)[npm](#)[yarn](#)[bun](#)pnpm dlx shadcn@latest add input

Copy

Usage

[Copy](#)import { Input } from "@/components/ui/input"

[Copy](#)<Input />

Examples

Default

[Input: email, Placeholder: Email] Copy

import { Input } from "@/components/ui/input"
export function InputDemo() {
  return <Input type="email" placeholder="Email" />
}

File

Picture: [Input: file, Placeholder: ] Copy

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
export function InputFile() {
  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}

Disabled

[Input: email, Placeholder: Email] Copy

import { Input } from "@/components/ui/input"
export function InputDisabled() {
  return <Input disabled type="email" placeholder="Email" />
}

With Label

Email: [Input: email, Placeholder: Email] Copy

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
export function InputWithLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

With Button

[Input: email, Placeholder: Email]Subscribe Copy

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
export function InputWithButton() {
  return (
    <div className="flex w-full max-w-sm items-center gap-2">
      <Input type="email" placeholder="Email" />
      <Button type="submit" variant="outline">
        Subscribe
      </Button>
    </div>
  )
}

Changelog

2025-09-18 Remove flex class

Edit input.tsx and remove the flex class from the input component. This is no longer needed.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║