Warp Design System

Appearance

Text area - Elements ​

A text area allows users to input extended text content that covers multiple lines.

ElementsreleasediOSreleasedReactreleasedVuereleased

Accessibility ​

If a visible label isn't specified, an aria-label must be provided to the text field for accessibility. If the field is labeled by a separate element, an aria-labelledby property must be provided using the id of the labeling element instead.

  • Always provide a visible label (do not rely on placeholder alone).
  • Do not rely on color alone for interaction feedback (e.g. error states).

Usage ​

A multi-line text input with built-in form validation, auto-resizing, and styling support.

The component automatically handles:

  • Form integration
  • Auto-resizing based on content and row constraints
  • Built-in validation with customizable error messages
  • Accessibility attributes and labeling

Examples ​

html
<w-textarea label="Description"></w-textarea>

Placeholder ​

Text hint that appears when the textarea is empty. Placeholder text should not be used as a substitute for a visible label.

html
<w-textarea
    label="Description"
    placeholder="Give as much detail as you can"
></w-textarea>

Height ​

You can control the height of the input field by setting either minimum-rows or maximum-rows

html
<w-textarea label="Description" minimum-rows="3"></w-textarea>

With maximum-rows the content will start scrolling when it passes the limit. Note that the field stops being resizable. Setting minimum-rows is redundant when you set maximum-rows.

html
<w-textarea label="Description" maximum-rows="3" value="Line 1
Line 2
Line 3
Line 4
Line 5"></w-textarea>

Disabled ​

Consider using more informative alternatives before choosing to use disabled, as some users may not understand why an element is disabled.

html
<w-textarea
    label="Description" 
    value="This form field is ignored"
    disabled
></w-textarea>

Read only ​

Makes the textarea content immutable while remaining focusable. The contents can still be copied.

html
<w-textarea
    label="Description"
    value="This content is read only"
    readonly
></w-textarea>

Styling API ​

<w-textarea> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
disabledbooleanfalseMakes the element not focusable and hides it from form submits
help-textstring-Description shown below the input field
invalidbooleanfalseMark the form field as invalid.
labelstring-Either a label or an aria-label must be provided.
maximum-rowsnumber-Sets the maximum number of text rows before the content starts scrolling.
minimum-rowsnumber-Sets the minimum number of text rows the textarea should display
namestring-The name of the input field when submitting the form
optionalbooleanfalseShow an icon behind the label indicating the field is optional
placeholderstring-Shown in the textarea when it doesn't have a value
read-onlybooleanfalseDeprecated: Use the native readonly attribute instead
readonlybooleanfalseWhether the input can be selected but not changed by the user
requiredbooleanfalseWhether user input is required on the input before form submission
validationMessage (JS only)string-Returns the validation message if the textarea is invalid, otherwise an empty string
validity (JS only)ValidityState-Returns the validity state of the textarea
valuestring-Lets you set the current value

Property Details ​

disabled ​

Keep in mind that using disabled in its current form is an anti-pattern.

There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.

Please consider more informative alternatives before choosing to use disabled on an element.

  • Type: boolean
  • Default: false

help-text ​

Use in combination with invalid to show as a validation error message, or on its own to show a help text.

  • Type: string
  • Default: -

invalid ​

Mark the form field as invalid.

Make sure to also set a help-text to help users fix the validation problem.

  • Type: boolean
  • Default: false

label ​

Either a label or an aria-label must be provided.

  • Type: string
  • Default: -

maximum-rows ​

Sets the maximum number of text rows before the content starts scrolling.

  • Type: number
  • Default: -

minimum-rows ​

Sets the minimum number of text rows the textarea should display

  • Type: number
  • Default: -

name ​

The name of the input field when submitting the form

  • Type: string
  • Default: -

optional ​

Show an icon behind the label indicating the field is optional

  • Type: boolean
  • Default: false

placeholder ​

Set a text that is shown in the textarea when it doesn't have a value.

Placeholder text should not be used as a substitute for labeling the element with a visible label.

  • Type: string
  • Default: -

read-only ​

Deprecated: Use the native readonly attribute instead

  • Type: boolean
  • Default: false

readonly ​

Whether the input can be selected but not changed by the user

  • Type: boolean
  • Default: false

required ​

Whether user input is required on the input before form submission

  • Type: boolean
  • Default: false

validationMessage (JS only) ​

Returns the validation message if the textarea is invalid, otherwise an empty string

  • Type: string
  • Default: -

validity (JS only) ​

Returns the validity state of the textarea

  • Type: ValidityState
  • Default: -

value ​

Lets you set the current value

  • Type: string
  • Default: -

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system