---
title: Input
description: Displays a form input field or a component that looks like an input field.
component: true
---

<ComponentExample
  src="/components/examples/input/demo.tsx"
  className="[&_input]:max-w-sm"
>
  <InputDemo />
</ComponentExample>

## Installation

```bash
npx shadcn-ui add input
```

<Accordion type="single" collapsible>
  <AccordionItem value="manual-installation">
    <AccordionTrigger>Manual Installation</AccordionTrigger>
    <AccordionContent>

1. Copy and paste the following code into your project.

<ComponentSource src="/components/ui/input.tsx" />

<Callout>
  This is the `<Input />` primitive. You can place it in a file at
  `components/ui/input.tsx`.
</Callout>

    </AccordionContent>

  </AccordionItem>
</Accordion>

## Usage

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

```tsx
<Input />
```

## Examples

### Default

<ComponentExample
  src="/components/examples/input/demo.tsx"
  extractClassname
  className="[&_input]:max-w-sm"
>
  <InputDemo />
</ComponentExample>

---

### Disabled

<ComponentExample
  src="/components/examples/input/disabled.tsx"
  extractClassname
  className="[&_input]:max-w-sm"
>

  <InputDisabled />
</ComponentExample>

---

### With Label

<ComponentExample src="/components/examples/input/with-label.tsx">
  <InputWithLabel />
</ComponentExample>

---

### With Text

<ComponentExample src="/components/examples/input/with-text.tsx">
  <InputWithText />
</ComponentExample>

---

### With Button

<ComponentExample src="/components/examples/input/with-button.tsx">
  <InputWithButton />
</ComponentExample>

---

### File

<ComponentExample src="/components/examples/input/file.tsx">
  <InputFile />
</ComponentExample>