Input

Inputs are fields used to get user inputs.

Overview

Example

Code

Import the component from @faststore/ui


_10import { Input } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/atoms/Input/styles.scss'

Follow the instructions in the Importing FastStore UI component styles tutorial.


_10<Input placeholder="Input" />

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-input`

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)`


_10<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)`

For further customization, you can use the following data attributes:

data-fs-input

Provide a Label when using input. Descriptive labels help users understand the purpose of a form control.

Label
InputField
InputField wraps an Input and its corresponding Label.
See more