1. Docs
  2. TextField

TextField

A text field allows a user to enter a plain text value with a keyboard.

Text fields can be built with <Input> or <TextArea> and <Label> elements, but you must manually ensure that they are semantically connected via ids for accessibility. TextField helps automate this, and handle other accessibility features while allowing for custom styling.

Installation

You can use the TextField import from react-aria-components as it does not need default styling. Install the Input, Label or TextArea component to use within from their respective pages.

Usage

Basic usages below. View Input and TextArea for more examples.

Input

Text Area

Description

TextField also supports optional description and error message elements, which can be used to provide more context about the field, and any validation messages.

Enter an email for us to contact you about your order.