🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Input Field

Input Field wraps an Input and its corresponding Label.

Overview


Import

Import the component from @faststore/ui

import { InputField } from '@faststore/ui'

Import Styles into your FastStore project

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

@import '@faststore/ui/src/components/atoms/Button/styles.scss';
@import '@faststore/ui/src/components/atoms/Input/styles.scss';
@import '@faststore/ui/src/components/molecules/InputField/styles.scss';

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


Usage

<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

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

Actionable w/ Error

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

Error

Error Message
<InputField
  label="Input w/ Action and Error"
  id="inputfield-action-error"
  actionable
  error="Error Message"
/>
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

<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