Input
Inputs are fields used to get user inputs.
Overview
Import
Import the component from @faststore/ui
import { Input } 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:
@import '@faststore/ui/src/components/atoms/Input/styles.scsss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<Input placeholder="Input" />Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-input |
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-bkg-color | var(--fs-color-body-bkg) |
--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