Textarea

A Textarea is a large text field users can type into. This pattern should be used when the expected user input is a long, multi-line text.

Example

Live Editor

<Textarea
  rows={5}
  cols={33}
  placeholder="I am placeholder text"
  label="Comment"
  infoText="The maximum length for comments is 200 characters"
/>

Result

Loading...

Usage Rules

Do:

• Use short and objective labels
• Communicate that a Textarea is optional by including an "optional" info after the label
• Make sure the user knows if a field is required by adding the required property.
• Make the area big enough to accommodate most expected inputs
• Validate input after users have finished interactions with the field and not before
• Indicate in the error text what the problem is and how to fix it

Don’t:

• Use a Textarea without a label
• Use a Textarea for very short inputs (use an Input instead)
• Add examples or complementary information to the label
• Replace the label with an error message. Use the info text instead

Variants

Full width

You can make the Textarea width to 100% by using the fullWidth prop.

Live Editor

<div style={{width: '700px'}}>
  <Textarea
    placeholder="I am placeholder text"
    label="Comment"
    infoText="The maximum length for comments is 1000 characters"
    fullWidth
  />
</div>

Result

Loading...

Custom Height

You can add custom Textarea height by using the height prop.

Live Editor

<div style={{ height: '300px'}}>
  <Textarea
    placeholder="I am placeholder text"
    label="Comment"
    height='100%'
  />
</div>

Result

Loading...

Label

Live Editor

<Textarea label="Label" />

Result

Loading...

You can add extra piece of information to the label by including a tooltip.

Live Editor

<Textarea
  label="Label"
  labelIconTooltip={{
    content: 'hello',
    position: 'top'
  }}
/>

Result

Loading...

Disabled

Live Editor

<Textarea label="Disabled Textarea" value="You can't edit me" disabled />

Result

Loading...

Info Text

The info text is used for hints or validation messages.

warning

When on firefox, the input and infoText will take full width by default. If you need the input to have a fixed width and the infoText to wrap to a second line, please either add css={} prop, a wrapper element with a fixed width, or a fixed width to the <form> element.

Live Editor

<>
  <Textarea infoText="Info text" label="Textarea with info text" />
  <Textarea infoText="Error text" label="Textarea with error text" invalid />
</>

Result

Loading...

You can change the position of the info text to be on top of the TextArea.

warning

Please avoid using the Info Text on top of the TextArea when you also need the optional label.

Live Editor

<>
  <Textarea infoText="Info text" infoTextTop label="Input with info text" />
  <Textarea
    infoText="Info text really long that goes on to a second line"
    infoTextTop
    label="Input with info text"
  />
</>

Result

Loading...

We also support text tags inside the Info Text. Like strong, b, i and a.

Live Editor

function InfoText() {
  const infoText = `Info <b>text</b> really <i>long</i> that <a href='#'> goes </a> on to a <strong> second </strong>line`;

  return (
    <Textarea
      rows={5}
      cols={33}
      placeholder="I am placeholder text"
      label="Comment"
      optionalText="optional"
      infoText={infoText}
    />
  );
}

Result

Loading...

Disabled Textarea

Live Editor

<Textarea label="Disabled Textarea" value="You can't edit me" disabled />

Result

Loading...

Optional field

You can show the field as optional or custom text by using the optionalText prop as string.

Live Editor

<Textarea
  rows={5}
  cols={33}
  placeholder="I am placeholder text"
  label="Comment"
  optionalText="optional"
  infoText="The maximum length for comments is 200 characters"
/>

Result

Loading...

onBlur event

Live Editor

function onBlurTest() {
  const [inputValue, setInputValue] = useState('');
  const [infoText, setInfoText] = useState('The maximum length for comments is 200 characters');
  const [invalid, setInvalid] = useState(false);
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
    setInfoText('');
    setInvalid(false);
  };
  
  const onBlur = () => {
    if (inputValue === '') {
      setInfoText('Required Field!');
      setInvalid(true);
    }
    if (inputValue !== '' && invalid === true) {
      setInfoText('');
      setInvalid(false);
    }
  }

  return (
    <Textarea
      rows={5}
      cols={33}
      placeholder="I am placeholder text"
      onChange={handleChange}
      onBlur={onBlur}
      label="Comment"
      value={inputValue}
      infoText={infoText}
      invalid={invalid}
    />
  );
}

Result

Loading...

Ref

Access to native textarea element by using ref.

Live Editor

function InfoText() {
  const ref = React.createRef();
  const handleChange = () => {
    ref.current.style.backgroundColor = 'lavender';
  }

  return (
    <Textarea
      rows={5}
      cols={33}
      placeholder="Type something ..."
      label="Comment"
      optionalText="optional"
      onChange={handleChange}
      ref={ref}
    />
  );
}

Result

Loading...

Props

Name	Type	Default
label Visual Label for the textarea	string	—
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
aria-labelledby Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
disabled Native HTML attribute: Link	boolean	—
id Native HTML attribute: Link . Internally, this component uses a random id. We use it to associate an input with a label element. As the random id might break snapshot tests it can be overridden by setting an explicit id.	string	—
onBlur Native HTML callback: Link	FocusEventHandler<HTMLTextAreaElement>	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
value The textarea's value	string | number	—
placeholder Native HTML attribute: Link	string	—
infoText Instructions to help users correctly fill in the data	string	—
labelIconTooltip The labelIconTooltip content can either be pure text or any rich content wrapped in a React component The labelIconTooltip content will be shown when hovering the label icon. The labelIconTooltip position is used to define the positioning of the tooltip When the labelIconTooltip content is not provided, the label icon will be not shown.	Omit<TooltipProps, "children">	—
onChange Native HTML callback: Link	ChangeEventHandler<HTMLTextAreaElement>	—
required Native HTML attribute: Link	boolean	—
optionalText optionalText value to show the field is optional with custom text	string	—
readOnly Native HTML attribute: Link	boolean	—
invalid Visually notify the user that the provided value is invalid	boolean	—
name Native HTML attribute: Link	string	—
infoTextTop positions the infoText on top of the Select	boolean	—
minLength Native HTML attribute: Link	number	—
maxLength Native HTML attribute: Link	number	—
rows Native HTML attribute: Link	number	—
cols Native HTML attribute: Link	number	—
fullWidth Boolean prop to take 100% width	boolean	—
height String prop for height to accept % and px	string	—
ref Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to `null` (or call the ref with `null` if you passed a callback ref). @see {@link Link React Docs}	Ref<HTMLTextAreaElement>	—
key	Key | null	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Related Components

• Input