Input

Sizes and states

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" />

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

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.

Field: Label, help and error wiring.
Combobox: Text entry that picks from a list.
SearchInput: Planned search-specific input.

Dependencies

Kind	Depends on
npm packages	`react`
Monarch components	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