TextField

A wrapper around React Aria’s TextField component. Manages label association, validation state, and error messages automatically.

Add via CLI

npx @a2ra/cli add text-field

Basic

Types

Disabled state

With validation error

Example JSON

{
  "type": "TextField",
  "props": {
    "label": "Email address",
    "type": "email",
    "name": "email",
    "isRequired": true,
    "description": "We'll never share your email."
  }
}

Props

Prop	Type	Description
label	string	Visible label (required for accessibility)
placeholder	string	Placeholder text
type	text default email password number tel url	Input type
name	string	Form field name
value	string	Controlled value
defaultValue	string	Uncontrolled default
autoComplete	string	Browser autocomplete hint
inputMode	text numeric decimal email tel url search	Virtual keyboard hint
minLength	number	Minimum character length
maxLength	number	Maximum character length
pattern	string	Regex validation pattern
isDisabled	true false default	Disables the input
isRequired	true false default	Marks field as required
isReadOnly	true false default	Prevents editing
isInvalid	true false default	Shows error styling
autoFocus	true false default	Focuses the field on mount
validationBehavior	aria default native	Validation reporting strategy
description	string	Helper text shown below the input
errorMessage	string	Error text shown when isInvalid is true

Notes

• Always provide a label. React Aria associates it with the input via ARIA attributes.
• errorMessage is only shown when isInvalid: true.
• Use validationBehavior: "native" for HTML form constraint validation with browser-native messages.