Source: https://monarchui.dev/components/text-field/

Components · Forms

# Input

Text entry at three sizes, with invalid and disabled states.

@rookcom/monarch-react

Component

## Sizes and states

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

Single-line (Input) and multi-line (Textarea) text entry styled with Monarch tokens.

### Use when

- The user types free text: names, emails, search terms, notes.
- Inside a Field, to get the label, help and error wiring automatically.

### Avoid when

- The value comes from a known list: use Select or Combobox.
- The choice is on/off: use Checkbox or Switch.

## Design principles

- Native `<input>` and `<textarea>` elements, so browser behaviour (autofill, IME, form submission) is unchanged.
- Inside a Field the Field’s `invalid`, `required` and `disabled` apply; explicit props win.

## API reference

```tsx
import { Input, Textarea } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Input` | component | client | `.mn-input` |
| `Textarea` | component | client | `.mn-input` |

Both forward their ref to the native element; all native attributes pass through.

Input replaces the native numeric `size` attribute with the Monarch `size` prop.

Generated from the TypeScript declarations of `packages/react/src/components/forms/text-field`.

## Properties

### `Input`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `disabled` | `boolean` |  |
| `id` | `string` |  |
| `invalid` | `boolean` | Marks the value invalid. Inside a Field, the Field's `invalid` is used. |
| `size` | `ControlSize` |  |

### `Textarea`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `disabled` | `boolean` |  |
| `id` | `string` |  |
| `invalid` | `boolean` |  |
| `resizable` | `boolean` | Allow vertical resizing. Default true. |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `size (Input)` | `'sm'``'md'``'lg'` | Control height from the `--mn-control-*` tokens. Default `md`. Exposed as `data-size`. |
| `resizable (Textarea)` | `'true'``'false'` | Allows vertical resizing. Default true (`data-resizable`). |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Hover | – | Border darkens unless the control is disabled. |
| Focus | – | Focus ring on `:focus-visible` and a focus-colour border. |
| Invalid | `aria-invalid="true"` | Danger-coloured border. Set by `invalid` or by the surrounding Field. |
| Disabled | `disabled` | Subtle background, disabled text colour and a not-allowed cursor. |

## Interaction behaviour

- Native text entry; Monarch adds no handlers.
- Textarea defaults to `rows={3}` with a minimum height of two control heights.

## Keyboard support

Native text-input keyboard behaviour; Monarch adds no key handling.

## Accessibility

Role

textbox

Accessible name

A FieldLabel in the surrounding Field, or

aria-label

.

- Inside a Field, `id`, `aria-describedby`, `aria-invalid` and `aria-required` are set from the Field.
- Placeholder text is not a label: always provide a FieldLabel or `aria-label`.

## Responsive behaviour

- Fills the container width (`width: 100%`) at every viewport width.

## Theme support

- Border, background and text colours are semantic tokens, so light, dark and more-contrast themes apply automatically.

## Do and don't

### Do

- Wrap inputs in a Field with a FieldLabel.
- Use the matching `type` (`email`, `tel`, `url`) so mobile keyboards and autofill work.

### Don't

- Do not use the placeholder as the only label.

## Related components

- [Field](https://monarchui.dev/components/form-field/): Label, help and error wiring.
- [Combobox](https://monarchui.dev/components/combobox/): Text entry that picks from a list.
- [SearchInput](https://monarchui.dev/components/search-input/): Planned search-specific input.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `react` |
| Monarch components | [Field](https://monarchui.dev/components/form-field/) |

## Testing coverage

- Explicit `invalid` wins outside a Field.
- Sizes, disabled and Textarea render accessibly (axe).
- Textarea defaults to three rows and is resizable.
- Field tests cover required, invalid, description and disabled wiring through Input and Textarea.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/forms/text-field`

## All example code

### Sizes and states

```tsx
import { Input, Textarea } from '@rookcom/monarch-react';

<Input size="sm" aria-label="Small" placeholder="Small" />
<Input aria-label="Default" placeholder="Default" />
<Input size="lg" aria-label="Large" placeholder="Large" />
<Input aria-label="Invalid" invalid defaultValue="Invalid value" />
<Input aria-label="Disabled" disabled placeholder="Disabled" />
<Textarea aria-label="Notes" placeholder="Notes" />
```