TextField

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

import {TextField} from './TextField';

<TextField label="Name" />

Value

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

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

function Example() {
  let [name, setName] = useState('');
  
  return (
    <>
      <TextField
        label="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.

import {TextField} from './TextField';
import {Button} from './Button';
import {Form} from 'react-aria-components';

function Example(props) {
  return (
    <Form>
      <TextField
        {...props}
        label="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 />
</TextField>

API