Usage
TextArea
TextArea is a multiline field built from native textarea wrapped by InputContainer.
Basic Usage
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-default" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-default" name="default" placeholder="Placeholder"></textarea>
</div>
</div>Variants
TextArea supports the following variant modifiers on InputContainer:
- InputContainer--fill (default)
- InputContainer--outline
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-variant-fill" class="Label">Fill (default)</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-variant-fill" name="variantFill" placeholder="Placeholder"></textarea>
</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-variant-outline" class="Label">Outline</label>
<div class="InputContainer InputContainer--outline InputContainer--medium">
<textarea id="text-area-variant-outline" name="variantOutline" placeholder="Placeholder"></textarea>
</div>
</div>Sizes
TextArea supports the following size modifiers on InputContainer:
- InputContainer--small
- InputContainer--medium (default)
- InputContainer--large
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-size-small" class="Label">Small</label>
<div class="InputContainer InputContainer--fill InputContainer--small">
<textarea id="text-area-size-small" name="sizeSmall" placeholder="Placeholder"></textarea>
</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-size-medium" class="Label">Medium (default)</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-size-medium" name="sizeMedium" placeholder="Placeholder"></textarea>
</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-size-large" class="Label">Large</label>
<div class="InputContainer InputContainer--fill InputContainer--large">
<textarea id="text-area-size-large" name="sizeLarge" placeholder="Placeholder"></textarea>
</div>
</div>Required Label
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-required" class="Label Label--required">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-required" name="required" placeholder="Placeholder" required></textarea>
</div>
</div>Hidden Label
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-hidden-label" class="Label accessibility-hidden">Hidden Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-hidden-label" name="hiddenLabel" placeholder="Placeholder"></textarea>
</div>
</div>Layout
TextArea is fluid by default. Use parent layout components like Grid, Stack, or Container to control the component width in page layouts.
Helper Text
To add helper text, use HelperText and connect it with aria-describedby.
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-helper-text" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea
id="text-area-helper-text"
name="helperText"
placeholder="Placeholder"
aria-describedby="text-area-helper-text-helper-text"
></textarea>
</div>
<div id="text-area-helper-text-helper-text" class="HelperText">Helper text</div>
</div>Validation States
Use validation modifiers on InputContainer:
- InputContainer--success
- InputContainer--warning
- InputContainer--danger
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-success" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium InputContainer--success">
<textarea id="text-area-success" name="success" placeholder="Placeholder">Filled</textarea>
</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-warning" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium InputContainer--warning">
<textarea
id="text-area-warning"
name="warning"
placeholder="Placeholder"
aria-describedby="text-area-warning-validation-text"
>
Filled</textarea>
</div>
<div id="text-area-warning-validation-text" class="ValidationText ValidationText--warning">Validation text</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-danger" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium InputContainer--danger">
<textarea
id="text-area-danger"
name="danger"
placeholder="Placeholder"
aria-describedby="text-area-danger-validation-text"
>
Filled</textarea>
</div>
<div id="text-area-danger-validation-text" class="ValidationText ValidationText--danger">
<ul>
<li>First validation text</li>
<li>Second validation text</li>
</ul>
</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-danger-with-icon" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium InputContainer--danger">
<textarea
id="text-area-danger-with-icon"
name="dangerWithIcon"
placeholder="Placeholder"
aria-describedby="text-area-danger-with-icon-validation-text"
>
Filled</textarea>
</div>
<div id="text-area-danger-with-icon-validation-text" class="ValidationText ValidationText--danger">
<svg class="Icon" width="20" height="20" aria-hidden="true">
<use href="/assets/icons/svg/sprite.svg#danger" />
</svg>
<div>Validation text with icon</div>
</div>
</div>To render validation text as a list, use <ul> inside .ValidationText. To render it with an icon, add an <svg> icon inside .ValidationText.
Disabled State
Use the InputContainer--disabled modifier and disabled attribute on textarea:
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-disabled" class="Label Label--disabled">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium InputContainer--disabled">
<textarea id="text-area-disabled" name="disabled" placeholder="Placeholder" disabled></textarea>
</div>
</div>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-disabled-filled" class="Label Label--required Label--disabled">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium InputContainer--disabled">
<textarea id="text-area-disabled-filled" name="disabledFilled" disabled required>Filled</textarea>
</div>
</div>Input Size
There are several ways to adjust the textarea size:
Rows Attribute
The visible number of lines is controlled by the native rows attribute (supported values are positive integers from 3 up).
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label for="text-area-rows" class="Label">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-rows" name="rows" rows="3"></textarea>
</div>
</div>Grid
For wider layouts, place TextArea into a Grid column. The field is fluid by default and fills the available width of the column.
JavaScript Plugin for Auto-Resizing
To enable auto-resizing of the textarea, first include Spirit JavaScript:
<script src="node_modules/@alma-oss/spirit-web/js/cjs/spirit-web.min.js" async></script>Please consult the main README for how to include JavaScript plugins.
Then add data-spirit-toggle="autoResize" in the wrapping <div>:
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);" data-spirit-toggle="autoResize">
<label for="text-area-auto-resize" class="Label">Label of auto-resizing TextArea</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<textarea id="text-area-auto-resize" name="autoResize"></textarea>
</div>
</div>Character Counter
TextArea counter patterns use CharacterCounter together with helper/validation text and screen-reader-only messages.