Textarea
Multi-line fields to get long user inputs.
The
Textarea component allows users to enter multi-line text. It is commonly used for longer inputs such as comments, messages, or descriptions.Example
Code
Usage
Import the component
_10import { Textarea } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Textarea/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Resize
Vertical
Example
Code
Horizontal
Example
Code
Both (default)
Example
Code
Disabled
Example
Code
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-padding | var(--fs-spacing-1) var(--fs-spacing-2) |
--fs-textarea-height | calc(var(--fs-control-tap-size) * 3) |
--fs-textarea-bkg-color | var(--fs-color-body-bkg) |
--fs-textarea-box-shadow | none |
--fs-textarea-box-shadow-hover | 0 0 0 var(--fs-border-width) var(--fs-border-color-active) |
--fs-textarea-border-radius | var(--fs-border-radius) |
--fs-textarea-border-width | var(--fs-border-width) |
--fs-textarea-border-color | var(--fs-border-color) |
--fs-textarea-border-color-hover | var(--fs-border-color-active) |
--fs-textarea-text-color | var(--fs-color-text) |
--fs-textarea-text-size | var(--fs-text-size-body) |
--fs-textarea-line-height | 1.25 |
--fs-textarea-transition-function | var(--fs-transition-function) |
--fs-textarea-transition-property | var(--fs-transition-property) |
--fs-textarea-transition-timing | var(--fs-transition-timing) |
Design tokens: Disabled
Disabled textareas reduce contrast and remove interactive indicators to show a non-editable state, while maintaining layout stability and keeping content readable.
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-disabled-bkg-color | var(--fs-color-disabled-bkg) |
--fs-textarea-disabled-border-width | var(--fs-border-width) |
--fs-textarea-disabled-text-color | var(--fs-color-disabled-text) |
--fs-textarea-disabled-border-color | var(--fs-border-color) |
Data attributes
You can target and override
Textarea styles using the following data attributes:data-fs-textareadata-fs-textarea-resizeProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-textarea |
| resize | "none" | "vertical" | "horizontal" | "both" | Controls the resize property of the textare (e.g.: none, vertical, horizontal, both). Default is 'both'. | both |
Best practices
✅ Do's
- Provide a Label to help users understand the purpose of the form control.
- Ensure each
Textareahas an associatedidthat matches theforattribute of its label. - Use placeholders only for examples or hints, not as replacements for labels.
- Set a height that shows multiple lines without requiring immediate resizing.
- Add validation messages when specific input formats or lengths are required.
- Make disabled or error states visually clear and accessible to screen readers.
❌ Don'ts
- Don't overuse resizing. If resizing is enabled, ensure it doesn't break the layout or cause accessibility issues.
- Don't use
Textareafor short inputs. For single-line or brief text, such as names or emails, use the Input component.