Skip to content

Forms

TextField & Textarea

Text inputs with label, hint, error and adornments — all ARIA wiring handled by the shared Field wrapper.

TextField Textarea Field
import { TextField, Textarea, Field } from '@anomalia/ui';

Notes

  • Inputs render at 16px on coarse pointers: below that, iOS Safari zooms the page on focus and never zooms back.
  • Pass error and the field flips to the danger ring and announces the message via role="alert".
  • Use Field directly when you need the same label/hint/error scaffolding around a custom control.

Examples

Basics

Label, hint, error and adornments all come from the shared Field wrapper, which owns the id and the aria-describedby wiring.

Shown to your clients

@

Textarea

`autosize` grows and shrinks with the content; `counter` needs a `maxlength` to count against.

Auto-grows as you type

API

TextField

PropTypeDefaultDescription
valuestringBindable value.
label / hint / errorstringField scaffolding; `error` replaces `hint`.
size'sm' | 'md' | 'lg''md'Control height.
leading / trailingSnippetAdornments inside the border.
fieldClassstringClass for the wrapper (`class` goes to the input).

Textarea

PropTypeDefaultDescription
autosizebooleanfalseGrow and shrink with the content.
counterbooleanfalseShow `n / maxlength`.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.