Input
Inputs are fields used to get user inputs.
Example
Code
Usage
Import the component
_10import { Input } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Input/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Disabled
Example
Code
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) |
Design tokens: 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) |
Data attributes
You can target and override
Input styles using the following data attributes:data-fs-inputProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-input |
Best Practices
✅ Do's
- Provide a Label when using input. Descriptive labels help users understand the purpose of a form control.