Textarea

Textareas are used to input multi-line text data

Examples

Base

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__base">Label</chi-label>
  <chi-textarea id="example__base"></chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__base">Label</label>
  <textarea class="chi-input" id="example__base"></textarea>
</div>

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus. Note: The required attribute can not be used on inputs with a disabled attribute specified.

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__disabled">Label</chi-label>
  <chi-textarea id="example__disabled" disabled>Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__disabled">Label</label>
  <textarea class="chi-input" id="example__disabled" disabled>Sample text</textarea>
</div>

Readonly

Use the readonly boolean attribute to prevent users from changing an input value. Unlike disabled inputs, readonly inputs are submitted with the form and can still receive browsing events such as mouse clicks and focus. Note: The required attribute can not be used on inputs with a readonly attribute specified.

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__readonly">Label</chi-label>
  <chi-textarea id="example__readonly" readonly>Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__readonly">Label</label>
  <textarea class="chi-input" id="example__readonly" readonly>Sample text</textarea>
</div>

Placeholder

Use the placeholder attribute to provide users with an example of the type of data that can be entered into an input. Note: Placeholder text is not persistent and visually disappears when a value is entered.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__placeholder">Label</chi-label>
  <chi-textarea id="example__placeholder" placeholder="Placeholder"></chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__placeholder">Label</label>
  <textarea class="chi-input" id="example__placeholder" placeholder="Placeholder"></textarea>
</div>

Required

Use the required boolean attribute to indicate which inputs must be completed before submitting a form. This is useful for capturing important information and reducing the risk of form errors. To render a required textarea, apply the required attribute to the textarea. It is also encouraged but not mandatory to apply a required attribute to the corresponding label of the textarea which will automatically render a red asterisk. Note: For HTML Blueprint implementations, the required attribute is not supported on the label. Please use the alternate method specified below for rendering a red asterisk within the label.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__required" required>Label</chi-label>
  <chi-textarea id="example__required" required></chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__required">
    Label
    <abbr class="chi-label__required" aria-label="Required field">*</abbr>
  </label>
  <textarea class="chi-input" id="example__required" required></textarea>
</div>

Optional

When the vast majority of inputs in a form are required, optional can be used to help emphasize the few that are not. This is useful for textareas that are not relevant to all users, such as an Additional Comments textarea in a create support ticket form. If the user does not have additional comments, applying optional to chi-label will help convey the labels corresponding textarea is not required and can be skipped. Note: For HTML Blueprint implementations, the optional boolean attribute is not supported on the label. Please use the alternate method specified below for rendering optional text within the label.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__optional" optional>Label</chi-label>
  <chi-textarea id="example__optional"></chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__optional">
    Label
    <abbr class="chi-label__optional" aria-label="Optional field">(optional)</abbr>
  </label>
  <textarea class="chi-input" id="example__optional"></textarea>
</div>

Help

Use chi-label__help to include a help icon that displays helpful information about a textarea in a popover. A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <chi-label for="example__label-with-icon">Label</chi-label>
    <div class="chi-label__help">
      <chi-button id="example__help-button" type="icon" size="xs" variant="flat" alternative-text="Help">
        <chi-icon icon="circle-info-outline"></chi-icon>
      </chi-button>
      <chi-popover id="example__help-popover" position="top" variant="text" arrow reference="#example__help-button">
        Helpful information goes here.
      </chi-popover>
    </div>
  </div>
  <chi-textarea id="example__label-with-icon"></chi-textarea>
</div>

<script>
  document.querySelector("#example__help-button")
    .addEventListener("click", function() {
      var popoverElem = document.querySelector("#example__help-popover");
      popoverElem.toggle();
    });
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <label class="chi-label" for="example__label-with-icon">Label</label>
    <div class="chi-label__help">
      <div class="chi-button -icon -flat -xs" id="example__help-button" data-target="#example__help-popover" aria-label="Help">
        <div class="chi-button__content">
          <i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
        </div>
      </div>
      <section class="chi-popover chi-popover--top" id="example__help-popover" aria-modal="true" role="dialog">
        <div class="chi-popover__content">
          <p class="chi-popover__text">Helpful information goes here.</p>
        </div>
      </section>
    </div>
  </div>
  <textarea class="chi-input" id="example__label-with-icon"></textarea>
</div>

<script>chi.popover(document.getElementById('example__help-button'));</script>

Message

Add a message below a textarea to store descriptions, validation feedback, and other helpful information.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__message">Label</chi-label>
  <chi-textarea id="example__message" helper-message="Optional helper message"></chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__message">Label</label>
  <textarea class="chi-input" id="example__message"></textarea>
  <div class="chi-label -status">Optional helper message</div>
</div>

Copy text button

Use the copy-text attribute to show a copy icon that provides the user the ability to copy the input value into the clipboard.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__copy-text-button">Label</chi-label>
  <chi-textarea value="Sample Text" id="example__copy-text-button" copy-text></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__copy-text-button">Label</label>
  <div class="-d--flex -align-items--start">
    <div class="chi-input__wrapper -flex--grow1">
      <textarea type="text" class="chi-input" value="Sample text" id="example__copy-text-button" />
    </div>

    <button id="example_copy-text-button" class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Copy to clipboard">
      <div class="chi-button__content">
        <i class="chi-icon icon-copy -sm" aria-hidden="true"></i>
      </div>
    </button>
  </div>
</div>

<script>
  document.getElementById('example_copy-text-button').addEventListener('click', () => {
    navigator.clipboard?.writeText(
      document.getElementById('example__copy-text-button').getAttribute('value')
    );
  });

  <!-- Tooltip -->
  chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>

Error

Use the danger state to provide feedback to users when input data fails to validate. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Describe the issue

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__danger" required>Describe the issue</chi-label>
  <chi-textarea id="example__danger" state="danger" helper-message="Please describe the issue" required></chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__danger">
    Describe the issue
    <abbr class="chi-label__required" aria-label="Required field">*</abbr>
  </label>
  <textarea class="chi-input -danger" id="example__danger" required></textarea>
  <div class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Please describe the issue
  </div>
</div>

Layout Variations

Inline Label

Apply the class -row to chi-form__item to render labels and textareas inline.

Label

Web Component
HTML Blueprint

<div class="chi-form__item -row -align-items--start">
  <chi-label for="example__inline-label">Label</chi-label>
  <chi-textarea id="example__inline-label"></chi-textarea>
</div>

<div class="chi-form__item -row -align-items--start">
  <label class="chi-label" for="example__inline-label">Label</label>
  <textarea class="chi-input" id="example__inline-label"></textarea>
</div>

Inline Label - width controlled using percent

Label width 50%

Web Component
HTML Blueprint

<div class="chi-form__item -row -align-items--start">
  <chi-label class="-w--50" for="example__inline-label-percent">Label width 50%</chi-label>
  <div class="-w--50">
    <chi-textarea id="example__inline-label-percent"></chi-textarea>
  </div>
</div>

<div class="chi-form__item -row -align-items--start">
  <label class="chi-label -w--50" for="example__inline-label-percent">Label</label>
  <div class="-w--50">
    <textarea class="chi-input" id="example__inline-label-percent"></textarea>
  </div>
</div>

Inline Label - width controlled using grid

Label width 3 columns

Web Component
HTML Blueprint

<div class="chi-form__item -row chi-grid -no-gutter -align-items--start">
  <chi-label class="chi-col -w--3" for="example__inline-label-grid">Label width 3 columns</chi-label>
  <chi-textarea class="chi-col -w--9" id="example__inline-label-grid"></chi-textarea>
</div>

<div class="chi-form__item -row chi-grid -no-gutter -align-items--start">
  <label class="chi-label chi-col -w--3" for="example__inline-label-grid">Label</label>
  <textarea class="chi-input chi-col -w--9" id="example__inline-label-grid"></textarea>
</div>

Inline Textareas

Label

Web Component
HTML Blueprint

<div class="-d--flex">
  <div class="chi-form__item -inline -flex--grow1">
    <chi-label for="example__inline-input01">Label</chi-label>
    <chi-textarea id="example__inline-input01"></chi-textarea>
  </div>
  <div class="chi-form__item -inline -flex--grow1">
    <chi-label for="example__inline-input02">Label</chi-label>
    <chi-textarea id="example__inline-input02"></chi-textarea>
  </div>
</div>

<div class="-d--flex">
  <div class="chi-form__item -inline -flex--grow1">
    <label class="chi-label" for="example__inline-input01">Label</label>
    <textarea class="chi-input" id="example__inline-input01"></textarea>
  </div>
  <div class="chi-form__item -inline -flex--grow1">
    <label class="chi-label" for="example__inline-input02">Label</label>
    <textarea class="chi-input" id="example__inline-input02"></textarea>
  </div>
</div>

Icons

Left Aligned

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-left">Label</chi-label>
  <chi-textarea id="example__icon-left" icon-left="map-marker" icon-left-color="muted">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left">Label</label>
  <div class="chi-input__wrapper -icon--left">
    <textarea class="chi-input" id="example__icon-left">Sample text</textarea>
    <i class="chi-icon icon-map-marker -icon--muted" aria-hidden="true"></i>
  </div>
</div>

Right Aligned

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-right">Label</chi-label>
  <chi-textarea id="example__icon-right" icon-right="check" icon-right-color="success">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-right">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input" id="example__icon-right">Sample text</textarea>
    <i class="chi-icon icon-check -icon--success" aria-hidden="true"></i>
  </div>
</div>

Left + Right Aligned

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-left-right">Label</chi-label>
  <chi-textarea id="example__icon-left-right" icon-left="map-marker" icon-right="check" icon-left-color="muted" icon-right-color="success">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left-right">Label</label>
  <div class="chi-input__wrapper -icon--left -icon--right">
    <textarea class="chi-input" id="example__icon-left-right">Sample text</textarea>
    <i class="chi-icon icon-map-marker -icon--muted" aria-hidden="true"></i>
    <i class="chi-icon icon-check -icon--success" aria-hidden="true"></i>
  </div>
</div>

Sizes

Textareas support the following sizes: xs, sm, md, lg, and xl. The default size is md.

Label

Sample text

Label

Sample text

Label

Sample text

Label

Sample text

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__xs">Label</chi-label>
  <chi-textarea size="sm" id="example__xs">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__sm">Label</chi-label>
  <chi-textarea size="sm" id="example__sm">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__md">Label</chi-label>
  <chi-textarea size="md" id="example__md">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__lg">Label</chi-label>
  <chi-textarea size="lg" id="example__lg">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__xl">Label</chi-label>
  <chi-textarea size="xl" id="example__xl">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__xs">Label</label>
  <textarea class="chi-input -xs" id="example__xs">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__sm">Label</label>
  <textarea class="chi-input -sm" id="example__sm">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__md">Label</label>
  <textarea class="chi-input -md" id="example__md">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__lg">Label</label>
  <textarea class="chi-input -lg" id="example__lg">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__xl">Label</label>
  <textarea class="chi-input -xl" id="example__xl">Sample text</textarea>
</div>

Sizes

Textareas support the following sizes: xs, sm, md, lg. The default size is md.

Label

Sample text

Label

Sample text

Label

Sample text

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__xs">Label</chi-label>
  <chi-textarea size="sm" id="example__xs">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__sm">Label</chi-label>
  <chi-textarea size="sm" id="example__sm">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__md">Label</chi-label>
  <chi-textarea size="md" id="example__md">Sample text</chi-textarea>
</div>
<div class="chi-form__item">
  <chi-label for="example__lg">Label</chi-label>
  <chi-textarea size="lg" id="example__lg">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__xs">Label</label>
  <textarea class="chi-input -xs" id="example__xs">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__sm">Label</label>
  <textarea class="chi-input -sm" id="example__sm">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__md">Label</label>
  <textarea class="chi-input -md" id="example__md">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__lg">Label</label>
  <textarea class="chi-input -lg" id="example__lg">Sample text</textarea>
</div>

Web Component

Properties

Property	Attribute	Description	Type	Default
`copyText`	`copy-text`	To show copy text icon	`boolean`	`false`
`disabled`	`disabled`	To disable Textarea	`boolean`	`false`
`helperMessage`	`helper-message`	To display an additional helper text message below the Textarea	`string`	undefined
`iconLeft`	`icon-left`	To add a left positioned icon	`string`	undefined
`iconLeftColor`	`icon-left-color`	To define color of left icon	`"danger" \| "dark" \| "grey" \| "info" \| "light" \| "muted" \| "navy" \| "orange" \| "primary" \| "secondary" \| "success" \| "warning"`	undefined
`iconRight`	`icon-right`	To add a right positioned icon	`string`	undefined
`iconRightColor`	`icon-right-color`	To define color of right icon	`"danger" \| "dark" \| "grey" \| "info" \| "light" \| "muted" \| "navy" \| "orange" \| "primary" \| "secondary" \| "success" \| "warning"`	undefined
`name`	`name`	To define name of Textarea	`string`	undefined
`placeholder`	`placeholder`	To define placeholder of Textarea	`string`	undefined
`readonly`	`readonly`	To prevent Textarea value from being changed	`boolean`	`false`
`size`	`size`	To define size of Textarea	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`
`state`	`state`	To define state color of Textarea	`"danger" \| "success" \| "warning"`	undefined
`value`	`value`	To read value of Textarea	`string`	`''`

Events

Event	Description	Type
`chiBlur`	Triggered when the element has lost focus.	`CustomEvent<any>`
`chiChange`	Triggered when an alteration to the element's value is committed by the user	`CustomEvent<string>`
`chiFocus`	Triggered when the user sets focus on the element.	`CustomEvent<any>`
`chiInput`	Triggered when the user changed the element's value but did not commit the change yet	`CustomEvent<string>`

Accessibility

Keyboard Navigation

Key	Function
`Tab`	Moves focus to the next focusable element
`Shift + Tab`	Moves focus to the previous focusable element
`Space`	Activates the button

For comprehensive details on keyboard support for input fields, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

For hands-on examples, consult the Accessibility (A11y) Style Guide.

Resources

ARIA Practices: Detailed ARIA guidance for accessible web content, focusing on text inputs.
A11y Style Guide: Outlines essential principles for accessible inputs and textareas.
W3C Forms Tutorial: Provides guidance on creating accessible forms.
DigitalA11y Project: Showcases live examples of accessible inputs of various types.

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)