Forma 36 - 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;


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.


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


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

Props (API reference)

Open in Storybook

Name	Type	Default
className	string CSS class to be appended to the root element
css	string number false true ComponentSelector Keyframes SerializedStyles ArrayInterpolation<undefined> ObjectInterpolation<undefined> (theme: any) => Interpolation<undefined>
defaultValue	string Set's default value for textarea
icon	ReactElement<any, string \| JSXElementConstructor<any>> Expects any of the icon components
id	string Sets the id of the input
isDisabled	false true Applies disabled styles
isInvalid	false true Applies invalid styles
isReadOnly	false true Applies read-only styles
isRequired	false true Validate the input
name	string Set the name of the input
onBlur	FocusEventHandler<HTMLTextAreaElement \| HTMLInputElement> Allows to listen to an event when an element loses focus
onChange	ChangeEventHandler<HTMLTextAreaElement \| HTMLInputElement> Allows to listen to an input’s change in value
onFocus	FocusEventHandler<HTMLTextAreaElement \| HTMLInputElement> Allows to listen to an event when an element get focused
onKeyDown	KeyboardEventHandler<HTMLTextAreaElement \| HTMLInputElement> Allows to listen to an event when a key is pressed
resize	"none" "both" "horizontal" "vertical" Sets whether an element is resizable, and if so, in which directions	vertical
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-textarea
value	string Set the value of the input
willBlurOnEsc	false true Boolean property that allows to blur on escape

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.

Import

Examples

Using as a controlled input

Using as an uncontrolled input

Using outside of forms

Different states

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page