---
title: Input
description: >-
  A text input control with size and width variants, plus invalid-state styling
  hooks.
---

# Input

## Overview

Inputs are a form control that let users enter and edit single lines of text. Use them when users need to provide short, structured values such as email addresses.

```tsx
<Field label="Email">
	<Input placeholder="email@example.com" />
</Field>
```

## Usage Guidelines

- **Match the input to the value:** Use the appropriate `type` for the value being collected, such as `"email"` or `"password"`.
- **Use for short values:** Use Input for concise, single-line values such as names, email addresses, or passwords. Move longer content to a more suitable control.
- **Use placeholders to provide context:** Help users understand the expected shape of data to enter by using placeholders to show an example value or expected format.

## API Reference

### `Input`

| Prop           | Type                                        | Default     |
| -------------- | ------------------------------------------- | ----------- |
| `width`        | `"small" \| "medium" \| "large" \| "fluid"` | `undefined` |
| `type`         | `"text" \| "email" \| "password"`           | `"text"`    |
| `value`        | `string`                                    | `undefined` |
| `defaultValue` | `string`                                    | `undefined` |
| `placeholder`  | `string`                                    | `undefined` |
| `disabled`     | `boolean`                                   | `false`     |

## Examples

### Basic field

Use Input inside Field to collect a short, labeled value with a clear example or hint.

```tsx
<Field label="Email">
	<Input placeholder="email@example.com" />
</Field>
```

### Icon

Use an icon to reinforce the input's purpose when the meaning is already clear from the surrounding context or placeholder.

```tsx
<Input icon={<SearchIcon />} placeholder="Search by name" />
```