Skip to main content

Function: TextField()

TextField(__namedParameters): Element

Defined in: composites/TextField/TextField.tsx:317

A semantic text input composite built on React Aria's TextField.

Validation feedback is driven by React Aria's isInvalid prop or validate callback and surfaces on the control, the label and the validation message via the invalid token State (ADR-017).

Two ways to author it, and the type system allows exactly one at a time:

Parameters​

ParameterType
__namedParametersTextFieldProps

Returns​

Element

Examples​

<TextField
  label="Email"
  name="email"
  type="email"
  isRequired
  description="We never share your email."
/>
<TextField isRequired>
  <TextFieldLabel>Email</TextFieldLabel>
  <TextFieldControl type="email" />
  <TextFieldDescription>We never share your email.</TextFieldDescription>
  <TextFieldError />
</TextField>

In the one-line form the validation message is always mounted, so a field with no errorMessage still shows the browser's own constraint message — which is the better copy for isRequired and type="email", and is already localized by the platform.