Forms

TextField

Text input with label, help text, validation, prefix and suffix. TextArea for longer text, growing if you want.

Ant Design: Input, Input.TextArea

import { TextField, TextArea } from '@alea/ui';

Examples

Text field

A label, help text and a placeholder that is only an example.

We send the license key here.

Validation

Required fields and your own rules. The error shows after the field is used, and on submit.

Prefix, suffix and sizes

Text or icons inside the field.

Website (optional)

https://.com

Handle

Small

Disabled

TextArea

Longer text. autoGrow grows with the content up to maxRows.

Message

NotesGrows as you type.

Props

`TextField` props

Show 21 React Aria props

A single-line text input with label, help, error, prefix and suffix.

Prop	Type	Default	Description
`description`	`ReactNode`	-	Help text under the field.
`errorMessage`	`ReactNode \| ((v: ValidationResult) => ReactNode)`	-	Error text, or a function of the validation result. Shown when invalid.
`label`	`ReactNode`	-	The visible label. Use aria-label instead only when the context makes it obvious.
`placeholder`	`string`	-	An example of what to type; never a replacement for the label.
`prefix`	`ReactNode`	-	Icon or text inside the field, before the value.
`showOptional`	`boolean`	-	Shows "(optional)" after the label.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	sm 32 px, md 44 px (default), lg 48 px.
`suffix`	`ReactNode`	-	Icon or text inside the field, after the value.

`TextArea` props

Show 21 React Aria props

Multi-line text, optionally growing with its content.

Prop	Type	Default	Description
`autoGrow`	`boolean`	-	Grows with the text up to maxRows.
`description`	`ReactNode`	-	Help text under the field.
`errorMessage`	`ReactNode \| ((v: ValidationResult) => ReactNode)`	-	Error text, or a function of the validation result. Shown when invalid.
`label`	`ReactNode`	-	The visible label. Use aria-label instead only when the context makes it obvious.
`maxRows`	`number`	`12`	With autoGrow, the most lines before it scrolls. Default 12.
`placeholder`	`string`	-	An example of what to type.
`rows`	`number`	`4`	Visible lines. Default 4.
`showOptional`	`boolean`	-	Shows "(optional)" after the label.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	sm 32 px, md 44 px (default), lg 48 px.

The label, help text and error are tied to the input, so screen readers read all three.
Errors appear after the field is used or on submit, and the field is marked invalid.
Required fields are marked with * and required in the accessibility tree.

Keyboard

Key	Does
`Tab`	Moves into the field

Do and don't

Always show a visible label.
Say how to fix an error: Use at least 8 characters.
Use autoComplete so browsers fill it in.

Don't

Don't use placeholder text as the label.
Don't validate on every keystroke before the person is done.

In Figma

Text field set: Size × State (Default, Hover, Focus, Filled, Invalid, Disabled) with Label, Help and Error properties.