React Aria
DocsReleasesBlog
React Aria

TextField

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

Theme 
 
 
isReadOnly 
isDisabled 
Example
TextField.tsx
TextField.css
import {TextField} from './TextField';

<TextField
  label="Name"
  placeholder="Enter your full name" />

Value

Use the value or defaultValue prop to set the text value, and onChange to handle user input.

Your name: 

import {TextField} from './TextField';
import {useState} from 'react';

function Example() {
  let [name, setName] = useState('');

  return (
    <>
      <TextField
        label="Name"
        placeholder="Enter your full name"
        value={name}
        onChange={setName} />
      <p>Your name: {name}</p>
    </>
  );
}

Forms

Use the name prop to submit the text value to the server. Set the isRequired, minLength, maxLength, pattern, or type props to validate the value, or implement custom client or server-side validation. See the Forms guide to learn more.

isRequired 
type 
 
 
 
import {TextField} from './TextField';
import {Button} from './Button';
import {Form} from './Form';;

function Example(props) {
  return (
    <Form>
      <TextField
        {...props}
        label="Email"
        placeholder="Enter your email"
        name="email"
        isRequired
        type="email"
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

TextArea

Use <TextArea> instead of <Input> to enable multi-line input.

import {TextField, Label, TextArea} from 'react-aria-components';

<TextField>
  <Label>Comment</Label>
  <TextArea
    className="react-aria-TextArea inset"
    placeholder="Enter a comment" />
</TextField>

API

Shows a text field component with labels pointing to its parts, including the input, and label elements.ValueLabelInputLabelHelp textDescription or error message 
<TextField>
  <Label />
  <Input /> or <TextArea />
  <Text slot="description" />
  <FieldError />
</TextField>

TextField

NameTypeDefault
enterKeyHint'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'Default: —
An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
isDisabledbooleanDefault: —
Whether the input is disabled.
isReadOnlybooleanDefault: —
Whether the input can be selected but not changed by the user.
type'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string & {}Default: 'text'
The type of input to render. See MDN.
inputMode'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'Default: —
Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.
autoCorrectstringDefault: —
An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See MDN.
spellCheckstringDefault: —
An enumerated attribute that defines whether the element may be checked for spelling errors. See MDN.
children<>Default: —
The children of the component. A function may be provided to alter the children based on component state.
valuestringDefault: —
The current value (controlled).
defaultValuestringDefault: —
The default value (uncontrolled).
onChange(value: T) => voidDefault: —
Handler that is called when the value changes.

Default className: react-aria-TextField

Render PropCSS Selector
isDisabledCSS Selector: [data-disabled]
Whether the text field is disabled.
isInvalidCSS Selector: [data-invalid]
Whether the value is invalid.
isReadOnlyCSS Selector: [data-readonly]
Whether the text field is read only.
isRequiredCSS Selector: [data-required]
Whether the text field is required.

Related pages