TextArea

TextAreas are multiline text inputs, useful for cases where users have a sizable amount of text to enter. They allow for all customizations that are available to text fields.

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

<TextArea label="Description" />

Value

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

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

function Example() {
  let [name, setName] = useState('');
  
  return (
    <>
      <TextArea
        label="Comment"
        value={name}
        onChange={setName} />
      <p>Your comment: {name}</p>
    </>
  );
}

Forms

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

import {TextArea, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <TextArea
        {...props}
        label="Comment"
        name="email"
        description="Please provide at least 10 characters."
        isRequired
        minLength={10}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

API