Textarea

Also known as: Multiline input, Comment box

Preview

Resources

Properties

PropertyValuesDefault
Variant ModeFill | OutlineFill
Size VariantSm | Md | Lg | XlMd
Label TextstringLabel
Value TextstringValue
Helper Booleantrue | falsefalse

When to use

When user needs to input multiple lines of text, such as comments or descriptions.
When content length is unpredictable.
Use regular input if the expected input is short.
When rich text formatting is required, use dedicated text editor.

Behaviour

Textarea (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:

StateContext
DefaultStatus of the component before the interaction. Also referred to as ‘resting’.
HoverWhen the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component.
FocusWhen user selects the component via keyboard navigation, but has not yet taken action on it.
ActiveState that communicates that the user has taken action on the component.
ErrorUsed when an invalid action occurs. Component may appear red or display helper, signaling an issue that needs resolution.
DisabledA non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment.

Required and optional

Use an asterisk (*) to indicate a required field. When the majority of fields in form group are optional, label only the required ones for clarity. Alternatively, if most fields in the form group are required, highlight only the optional fields to avoid unnecessary visual clutter.

Label position

Field label is typically positioned on top of the textarea container. For the Xl size, the label appears inside the textarea container. Initially, label for Xl size behaves similar to a placeholder, but as the user provides input, the label resizes and moves to the top of the textarea container.

Helper component

Helper is a nested component and can optionally be shown below the textarea container. Use helper text if providing additional context about the form item (error message or hint). Keep the message concise and clear, optionally show an icon to support the message.

PropertyValuesDefault
Type VariantHint | ErrorHint
Icon Booleantrue | falsetrue
Label TextstringHint