TextareaField
Multi-line text fields used to get long user inputs.
TextareaField is a multi-line text field component to get long user inputs. The component wraps a Textarea and its corresponding Label.Example
Code
Error Message
Import
Import the component from @faststore/ui
_10import { TextareaField } from '@faststore/ui'
Import styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/molecules/TextareaField/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Props
| Name | Type | Description | Default |
|---|---|---|---|
| resize | "none" | "vertical" | "horizontal" | "both" | Controls the resize property of the textare (e.g.: none, vertical, horizontal, both). Default is 'both'. |
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-width | 100% |
--fs-textarea-height | 100% |
--fs-textarea-field-padding | 18px var(--fs-spacing-2) 0 |
--fs-textarea-field-color | var(--fs-color-text) |
--fs-textarea-field-size | var(--fs-text-size-body) |
--fs-textarea-field-border-color | var(--fs-border-color) |
--fs-textarea-field-transition-function | var(--fs-transition-function) |
--fs-textarea-field-transition-property | var(--fs-transition-property) |
--fs-textarea-field-transition-timing | var(--fs-transition-timing) |
Nested elements
Label
_10 <TextareaField label="Label" id="textareafield-default" />
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-field-label-placeholder-top-padding | var(--fs-spacing-2) |
--fs-textarea-field-label-max-width | var(--fs-textarea-width) |
--fs-textarea-field-label-max-height | calc(var(--fs-textarea-height) - var(--fs-textarea-field-label-placeholder-top-padding)) |
--fs-textarea-field-label-padding | 0 var(--fs-spacing-2) |
--fs-textarea-field-label-color | var(--fs-color-text-light) |
--fs-textarea-field-label-size | var(--fs-text-size-tiny) |
Button
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-field-button-height | var(--fs-control-tap-size) |
Variants
Error
Error Message
_10<TextareaField_10 label="Input w/ Error Message"_10 id="textareafield-error"_10 error="Error Message"_10/>
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-field-error-message-size | var(--fs-text-size-legend) |
--fs-textarea-field-error-message-line-height | 1.1 |
--fs-textarea-field-error-message-margin-top | var(--fs-spacing-0) |
--fs-textarea-field-error-message-color | var(--fs-color-danger-text) |
--fs-textarea-field-error-border-color | var(--fs-color-danger-border) |
--fs-textarea-field-error-box-shadow | 0 0 0 var(--fs-border-width) var(--fs-textarea-field-error-border-color) |
--fs-textarea-field-error-focus-ring | var(--fs-color-focus-ring-danger) |
Disabled
_10<TextareaField label="Input Disabled" id="textareafield-disabled" disabled />
| Local token | Default value/Global token linked |
|---|---|
--fs-textarea-field-disabled-bkg-color | var(--fs-color-disabled-bkg) |
--fs-textarea-field-disabled-text-color | var(--fs-color-disabled-text) |
--fs-textarea-field-disabled-border-width | var(--fs-border-width) |
--fs-textarea-field-disabled-border-color | var(--fs-border-color) |
Customization
For further customization, you can use the following data attributes:
data-fs-textarea-fielddata-fs-textarea-field-labeldata-fs-textarea-field-errordata-fs-textarea-field-error-message