Textarea | iTwinUI

A multiline text box.

Textarea (or multi-line fields) are larger text field that can accommodate more text. It is vertically resizable and wraps text to the next line when maximum line length is reached. It automatically scrolls down to allow more text to be input when the bottom is reached. This type of text field implies that a larger input of text is possible and encouraged.

import * as React from 'react';
import { LabeledTextarea } from '@itwin/itwinui-react';

export default () => {
  return (
    <LabeledTextarea
      label='Textarea label'
      message='Help message'
      placeholder='Labeled textarea'
    />
  );
};

If the area is shrunk to a size smaller than the amount of text within, a scrollbar appears to keep navigation possible. This behavior is especially important for textarea without a resizing handle, to avoid making text editing tedious.

import * as React from 'react';
import { LabeledTextarea } from '@itwin/itwinui-react';

export default () => {
  const [value, setValue] = React.useState(
    'If the area is shrunk to a size smaller than the amount of text within, a scrollbar appears to keep navigation possible. This behavior is especially important for textarea without a resizing handle, to avoid making text editing tedious.',
  );

  return (
    <LabeledTextarea
      label='Textarea Scroll'
      id='text-area'
      value={value}
      onChange={(event) => setValue(event.target.value)}
      className='demo-text-area'
    />
  );
};

Variants

Status

If status messages are required, the styling is similar to inputs. For the default textarea, the bottom border gains the color of the alert level, as well as the corresponding icon and message.

import * as React from 'react';
import { LabeledTextarea } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <LabeledTextarea
        label='Positive textarea'
        message='Happy message'
        status='positive'
        placeholder='Labeled textarea'
      />
      <LabeledTextarea
        label='Warning textarea'
        message='Cautious message'
        status='warning'
        placeholder='Labeled textarea'
      />
      <LabeledTextarea
        label='Negative textarea'
        message='Angry message'
        status='negative'
        placeholder='Labeled textarea'
      />
    </div>
  );
};

Inline

It’s possible to use textarea inline. This could be useful in styling forms.

import * as React from 'react';
import { LabeledTextarea } from '@itwin/itwinui-react';

export default () => {
  return (
    <LabeledTextarea
      label='Inline textarea'
      status='positive'
      placeholder='Labeled textarea'
      displayStyle='inline'
    />
  );
};

Usage

Use multi-line textarea when a form requires extensive information to be entered by the user. Examples include incident reports, daily logs, and details of events.

The area’s height may be manipulated at the user’s discretion, if the resizing handle is enabled. This way, if the amount of text required is expected to be lengthy, it makes writing more comfortable.

Props

Prop	Description	Default
label	Label for the textarea. ReactNode
message	Message below the textarea. Does not apply to 'inline' textarea. ReactNode
status	Status of text area. "positive" \| "warning" \| "negative"
wrapperProps	Pass props to wrapper element. Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: Ref<...>; }, "as" \| "labelPlacement"> & InputGridOwnProps & { ...; }
labelProps	Passes properties for label. DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>
messageContentProps	Passes properties for message content. Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: Ref<HTMLDivElement>; }
iconProps	Passes properties for svgIcon. Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ...; }, "as" \| ... 4 more ... \| "padded"> & { ...; } & Omit<...> & { ...; }
svgIcon	Custom svg icon. Will override status icon if specified. Element
displayStyle	Set display style of label. Supported values: 'default' - label appears above input. 'inline' - appears in the same line as input. "default" \| "inline"	'default'
as	"symbol" \| "object" \| "textarea" \| "input" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| ... 159 more ... \| FunctionComponent<...>