Documentation
Feedback
Guides
Storefront Development

Storefront Development
Input Field

InputFields are text fields used to get user inputs.

Input Field wraps an Input and its corresponding Label.

Overview

Example
Code
Error Message
Error Message

Import

Import the component from @faststore/ui

_10
import { InputField } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/InputField/styles.scss'


Usage


_10
<InputField label="Label" id="inputfield-label" />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-input-field
id*stringID to identify input and corresponding label.
label*stringThe text displayed to identify input text.
errorstringThe error message is displayed when an error occurs.
inputRefMutableRefObject<HTMLInputElement | null>Component's ref.
disabledbooleanSpecifies that the whole input component should be disabled.
actionablebooleanAdds a Button to the component.
onSubmit() => voidCallback function when button is clicked. Required for actionable input.*
onClear() => voidCallback function when clear button is clicked. Required for actionable input.*
buttonActionTextstringThe text displayed on the Button. Suggestion: maximum 9 characters.Apply
displayClearButtonbooleanBoolean that controls the clear button.

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


_10
<InputField label="Input w/ Action" id="inputfield-action" actionable />

Actionable w/ Error

Error Message

_10
<InputField
_10
label="Input w/ Error Message"
_10
id="inputfield-error"
_10
error="Error Message"
_10
/>

Error

Error Message

_10
<InputField
_10
label="Input w/ Action and Error"
_10
id="inputfield-action-error"
_10
actionable
_10
error="Error Message"
_10
/>

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


_10
<InputField label="Input Disabled" id="inputfield-disabled" disabled />

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page