---
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"
  extractClassname
  className="[&_input]:max-w-sm"
>
  <InputDemo />
</ComponentExample>

## Installation

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>

## Usage

Copy and paste the code examples below into your project.

## 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>