Input
Inputs are fields used to get user inputs.
Overview
Import
Import the component from @faststore/ui
import { Input } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/atoms/Input/styles.scss'
Usage
<Input placeholder="Input" />
Props
Name | Type | Description | Default |
---|---|---|---|
Coming Soon |
Design Tokens
Local token | Default value/Global token linked |
---|---|
--fs-input-padding | var(--fs-spacing-1) var(--fs-spacing-2) |
--fs-input-height | var(--fs-control-tap-size) |
--fs-input-box-shadow | none |
--fs-input-box-shadow-hover | 0 0 0 var(--fs-border-width) var(--fs-border-color-active) |
--fs-input-text-color | var(--fs-color-text) |
--fs-input-text-size | var(--fs-text-size-body) |
--fs-input-line-height | 1.25 |
--fs-input-transition-function | var(--fs-transition-function) |
--fs-input-transition-property | var(--fs-transition-property) |
--fs-input-transition-timing | var(--fs-transition-timing) |
Variants
Disabled
<Input placeholder="Input" disabled />
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
Best Practices
✅ Do's
- Provide a Label when using input. Descriptive labels help users understand the purpose of a form control.
Related components
InputField
InputField wraps an Input and its corresponding Label.
See more