Navigation: [/sitemap.md](/sitemap.md)

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

```astro live props={{ name: 'input' }}
---
import { Input } from "@/components/ui/input"
---

<Input class="max-w-sm" placeholder="Email" />
```

## Installation

```bash
npx shadcn@latest add @fulldev/input
```

## Usage

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

```astro
<Input />
```

## Examples

### Basic

```astro live
---
import { Input } from "@/components/ui/input"
---

<Input class="max-w-sm" placeholder="Email" />
```

### Disabled

```astro live
---
import { Input } from "@/components/ui/input"
---

<Input class="max-w-sm" placeholder="Email" disabled />
```

### Invalid

```astro live
---
import { Input } from "@/components/ui/input"
---

<Input class="max-w-sm" placeholder="Email" aria-invalid="true" />
```

### File

```astro live
---
import { Input } from "@/components/ui/input"
---

<Input class="max-w-sm" type="file" />
```

## Notes

- Use `Input` for single-line text-like controls such as email, password, and
  phone fields.
- Pair it with `Label` for simple forms, or use [Field](/components/field/)
  when you also need descriptions, validation, or grouped layouts.
- Set `aria-invalid` when the control should display an invalid state.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/input) for more information on props.