Textarea

Import

import { Textarea } from '@contentful/f36-components';
// or
import { Textarea } from '@contentful/f36-forms';

Examples

Using as a controlled input

Controlled components in React are those in which form data is handled by the component’s state.

For using the Textarea as a controlled input, you need to:

• Pass value property, with this property it will already be a controlled component;
• Pass onChange handler, so you can use it to update the value of the input;

Hide code
function TextareaControlledExample() {
  const [value, setValue] = useState(
    'I think that Forma 36 is an amazing component library!',
  );
  return (
    <FormControl isRequired isInvalid={!value}>
      <FormControl.Label>Your comment</FormControl.Label>
      <Textarea
        value={value}
        placeholder="Start typing..."
        onChange={(e) => setValue(e.target.value)}
      />
      <FormControl.HelpText>
        Provide a short, but descriptive information
      </FormControl.HelpText>
      {!value && (
        <FormControl.ValidationMessage>
          Please, provide your message
        </FormControl.ValidationMessage>
      )}
    </FormControl>
  );
}
function TextareaControlledExample() {
  const [value, setValue] = useState(
    'I think that Forma 36 is an amazing component library!',
  );
  return (
    <FormControl isRequired isInvalid={!value}>
      <FormControl.Label>Your comment</FormControl.Label>
      <Textarea
        value={value}
        placeholder="Start typing..."
        onChange={(e) => setValue(e.target.value)}
      />
      <FormControl.HelpText>
        Provide a short, but descriptive information
      </FormControl.HelpText>
      {!value && (
        <FormControl.ValidationMessage>
          Please, provide your message
        </FormControl.ValidationMessage>
      )}
    </FormControl>
  );
}
Open in Playground

Using as an uncontrolled input

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the Textarea as an uncontrolled input, for that you can:

• Set the defaultValue property, it will ensure that the initial value of the input is set.
• Don't set the value as it will make the input controlled.

Hide code
function TextareaUncontrolledExample() {
  return (
    <FormControl isRequired>
      <FormControl.Label>Description</FormControl.Label>
      <Textarea
        defaultValue=""
        name="description"
        placeholder="Start typing..."
      />
      <FormControl.HelpText>Provide detailed information</FormControl.HelpText>
    </FormControl>
  );
}
function TextareaUncontrolledExample() {
  return (
    <FormControl isRequired>
      <FormControl.Label>Description</FormControl.Label>
      <Textarea
        defaultValue=""
        name="description"
        placeholder="Start typing..."
      />
      <FormControl.HelpText>Provide detailed information</FormControl.HelpText>
    </FormControl>
  );
}
Open in Playground

Using outside of forms

When Textarea is used outside of form (without FormControl) and has no <label> associated with it, you need to specify aria-label.

Different states

Hide code
function TextareaStatesExample() {
  return (
    <Stack flexDirection="column">
      <Textarea
        defaultValue="I'm disabled Textarea"
        isDisabled
        name="value-1"
      />
      <Textarea defaultValue="I'm invalid Textarea" isInvalid name="value-1" />
      <Textarea
        defaultValue="I'm read-only Textarea"
        isReadOnly
        name="value-1"
      />
    </Stack>
  );
}
function TextareaStatesExample() {
  return (
    <Stack flexDirection="column">
      <Textarea
        defaultValue="I'm disabled Textarea"
        isDisabled
        name="value-1"
      />
      <Textarea defaultValue="I'm invalid Textarea" isInvalid name="value-1" />
      <Textarea
        defaultValue="I'm read-only Textarea"
        isReadOnly
        name="value-1"
      />
    </Stack>
  );
}
Open in Playground

This component also accepts relevant HTML attributes as props. These include rows, autoFocus and autoComplete.

Accessibility

• To ensure accessibility, provide a name prop
• In case the input is required, use isRequired prop
• If you are using this component in a form, provide validation to the input and use isInvalid to control the error state of Textarea. Also show meaningful error messages with the ValidationMessage component.