TextField

TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

import {TextField} from '@react-spectrum/s2';

<TextField label="Name" />

Value

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

import {TextField} from '@react-spectrum/s2';
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, Button, Form} from '@react-spectrum/s2';

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

API