> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Input

Short, single-line free text — reach for `Textarea` when the answer runs to sentences, and `Select` when it comes from a known set. Wrap it in `Field` for the label and description; a placeholder is an example of the answer, never a substitute for the label and never where required information lives.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Input) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-input--overview)

```tsx
import { Input } from '@wallarm-org/design-system/Input';

<Input />
```

## Usage

```tsx
import { Input } from '@wallarm-org/design-system/Input';
```

## Examples

### Sizes

A 36 / 32 / 24px scale shared with `Textarea`, `InputGroup` and the date inputs, so a row
of mixed fields lines up. Reach below `default` only in dense places like a table filter.

```tsx
import { Input } from '@wallarm-org/design-system/Input';
import { HStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <HStack gap={16} align='start'>
    <Input size='default' />
    <Input size='medium' />
    <Input size='small' />
  </HStack>
);
```

### Focused

Focus is a ring outside the border rather than a border change, so nothing reflows by a
pixel when the reader tabs through a form.

```tsx
import { Input } from '@wallarm-org/design-system/Input';

<Input />
```

### Disabled

Dimmed and not focusable. Say elsewhere what would enable it — a disabled field with no
explanation reads as broken.

```tsx
import { Input } from '@wallarm-org/design-system/Input';

<Input disabled />
```

### With value

A filled field. Placeholder text is deliberately set at the same size as real input so the
text doesn't jump when typing starts; only its colour is lighter.

```tsx
import { Input } from '@wallarm-org/design-system/Input';

<Input value="Some value..." />
```

### With error

`error` reddens the border and sets `aria-invalid`. It shows that something is wrong but
not what — the message is `FieldError`'s job.

```tsx
import { Input } from '@wallarm-org/design-system/Input';

<Input error />
```

## Props

| Prop           | Type                                                                         | Default   | Description |
| -------------- | ---------------------------------------------------------------------------- | --------- | ----------- |
| title          | `string \| undefined`                                                        |           |             |
| pattern        | `string \| undefined`                                                        |           |             |
| defaultChecked | `boolean \| undefined`                                                       |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                         |           |             |
| autoFocus      | `boolean \| undefined`                                                       |           |             |
| id             | `string \| undefined`                                                        |           |             |
| tabIndex       | `number \| undefined`                                                        |           |             |
| rel            | `string \| undefined`                                                        |           |             |
| onChange       | `ChangeEventHandler<T, HTMLInputElement> \| undefined`                       |           |             |
| type           | `HTMLInputTypeAttribute \| undefined`                                        |           |             |
| disabled       | `boolean \| undefined`                                                       | `false`   |             |
| name           | `string \| undefined`                                                        |           |             |
| value          | `string \| number \| readonly string[] \| undefined`                         |           |             |
| alt            | `string \| undefined`                                                        |           |             |
| height         | `string \| number \| undefined`                                              |           |             |
| src            | `string \| undefined`                                                        |           |             |
| width          | `string \| number \| undefined`                                              |           |             |
| autoComplete   | `HTMLInputAutoCompleteAttribute \| undefined`                                |           |             |
| maxLength      | `number \| undefined`                                                        |           |             |
| minLength      | `number \| undefined`                                                        |           |             |
| placeholder    | `string \| undefined`                                                        |           |             |
| readOnly       | `boolean \| undefined`                                                       |           |             |
| required       | `boolean \| undefined`                                                       |           |             |
| checked        | `boolean \| undefined`                                                       |           |             |
| step           | `string \| number \| undefined`                                              |           |             |
| accept         | `string \| undefined`                                                        |           |             |
| max            | `string \| number \| undefined`                                              |           |             |
| min            | `string \| number \| undefined`                                              |           |             |
| multiple       | `boolean \| undefined`                                                       |           |             |
| size           | `{ default: string; medium: string; small: string; 'inline-edit': string; }` | `default` |             |
| error          | `{ true: string; false: string; }`                                           | `false`   |             |
| data-testid    | `string \| undefined`                                                        |           |             |