Skip to main content

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 tokenDefault value/Global token linked
--fs-input-field-paddingvar(--fs-spacing-2) var(--fs-spacing-2) 0
--fs-input-field-color
var(--fs-color-text)
--fs-input-field-sizevar(--fs-text-size-body)
--fs-input-field-border-color
var(--fs-border-color)
--fs-input-field-transition-functionvar(--fs-transition-function)
--fs-input-field-transition-propertyvar(--fs-transition-property)
--fs-input-field-transition-timingvar(--fs-transition-timing)

Nested Elements​

Label​

Local tokenDefault value/Global token linked
--fs-input-label-padding0 var(--fs-spacing-2)
--fs-input-label-color
var(--fs-color-text-light)
--fs-input-label-sizevar(--fs-text-size-tiny)

Variants​

Actionable​

Loading...

Actionable w/ Error​

Loading...

Error​

Loading...
Local tokenDefault value/Global token linked
--fs-input-error-message-margin-topvar(--fs-spacing-0)
--fs-input-error-message-sizevar(--fs-text-size-legend)
--fs-input-error-message-line-height1.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-shadow0 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 tokenDefault 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-widthvar(--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