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

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY