Textarea
Examples
Base
<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.
<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.
<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.
<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.
<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.
<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.
<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>
<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.
<div class="chi-form__item">
<chi-label for="example__message">Label</chi-label>
<chi-textarea id="example__message"></chi-textarea>
<div class="chi-label -status">Optional helper message</div>
</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>
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.
<div class="chi-form__item">
<chi-label for="example__danger" required>Describe the issue</chi-label>
<chi-textarea id="example__danger" state="danger" required></chi-textarea>
<div class="chi-label -status -danger">
<chi-icon icon="circle-warning"></chi-icon>
Please describe the issue.
</div>
</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.
<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
<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
<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
<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
<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
<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
<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
.
<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
.
<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>