Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
InputField

Text fields used to get user inputs.

The InputField is a text field component to get user inputs. The component wraps an Input and its corresponding Label.
Example
Code
Error Message
Error Message

Usage

Import the component


_10
import { InputField } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

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


Examples

Variants

Actionable

Example
Code

Actionable w/ Error

Example
Code
Error Message

Error

Example
Code
Error Message

Disabled

Example
Code

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)

Design tokens: Label

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

Design tokens: Button

Local tokenDefault value/Global token linked
--fs-input-field-button-heightvar(--fs-control-tap-size)

Design tokens: Error

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)

Design tokens: 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)

Data attributes

You can target and override InputField styles using the following data attributes:
data-fs-input-field
data-fs-input-field-error
data-fs-input-field-error-message

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.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page