InputField
InputField wraps an Input and its corresponding Label.
Overview​
Loading...
Import​
Import the component from @faststore/ui
import { InputField } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/molecules/InputField/styles.scss'
Usage​
Loading...
Props​
Design Tokens​
| Local token | Default value/Global token linked |
|---|---|
--fs-input-field-padding | var(--fs-spacing-2) var(--fs-spacing-2) 0 |
--fs-input-field-color | var(--fs-color-text) |
--fs-input-field-size | var(--fs-text-size-body) |
--fs-input-field-border-color | var(--fs-border-color) |
--fs-input-field-transition-function | var(--fs-transition-function) |
--fs-input-field-transition-property | var(--fs-transition-property) |
--fs-input-field-transition-timing | var(--fs-transition-timing) |
Nested Elements​
Label​
| Local token | Default value/Global token linked |
|---|---|
--fs-input-label-padding | 0 var(--fs-spacing-2) |
--fs-input-label-color | var(--fs-color-text-light) |
--fs-input-label-size | var(--fs-text-size-tiny) |
Variants​
Actionable​
Loading...
Actionable w/ Error​
Loading...
Error​
Loading...
| Local token | Default value/Global token linked |
|---|---|
--fs-input-error-message-margin-top | var(--fs-spacing-0) |
--fs-input-error-message-size | var(--fs-text-size-legend) |
--fs-input-error-message-line-height | 1.1 |
--fs-input-error-message-color | var(--fs-color-danger-text) |
--fs-input-error-border-color | var(--fs-color-danger-border) |
--fs-input-error-box-shadow | 0 0 0 var(--fs-border-width) var(--fs-input-error-border-color) |
--fs-input-error-focus-ring | var(--fs-color-focus-ring-danger) |
Disabled​
Loading...
| Local token | Default value/Global token linked |
|---|---|
--fs-input-disabled-bkg-color | var(--fs-color-disabled-bkg) |
--fs-input-disabled-text-color | var(--fs-color-disabled-text) |
--fs-input-disabled-border-width | var(--fs-border-width) |
--fs-input-disabled-border-color | var(--fs-border-color) |
Customization​
For further customization, you can use the following data attributes:
data-fs-input-field
data-fs-input-field-error
data-fs-input-field-error-message