Input Field

Input Field wraps an Input and its corresponding Label.

Overview

Import the component from @faststore/ui

import { InputField } from '@faststore/ui'

Import Styles

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

Label

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

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-input-field`
id*	`string`	ID to identify input and corresponding label.
label*	`string`	The text displayed to identify input text.
error	`string`	The error message is displayed when an error occurs.
inputRef	`MutableRefObject<HTMLInputElement \| null>`	Component's ref.
disabled	`boolean`	Specifies that the whole input component should be disabled.
actionable	`boolean`	Adds a Button to the component.
onSubmit	`() => void`	Callback function when button is clicked. Required for actionable input.*
onClear	`() => void`	Callback function when clear button is clicked. Required for actionable input.*
buttonActionText	`string`	The text displayed on the Button. Suggestion: maximum 9 characters.	`Apply`
displayClearButton	`boolean`	Boolean that controls the clear button.

Local token	Default value/Global token linked
`--fs-input-field-padding`	`var(--fs-spacing-2) var(--fs-spacing-2) 0`
`--fs-input-field-color`	`var(--fs-color-text)`
`--fs-input-field-size`	`var(--fs-text-size-body)`
`--fs-input-field-border-color`	`var(--fs-border-color)`

`--fs-input-field-transition-function`	`var(--fs-transition-function)`
`--fs-input-field-transition-property`	`var(--fs-transition-property)`
`--fs-input-field-transition-timing`	`var(--fs-transition-timing)`

Local token	Default value/Global token linked
`--fs-input-label-padding`	`0 var(--fs-spacing-2)`
`--fs-input-label-color`	`var(--fs-color-text-light)`
`--fs-input-label-size`	`var(--fs-text-size-tiny)`

Input w/ Action

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

Input w/ Error MessageError Message

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

Input w/ Action and ErrorError Message

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

Local token	Default value/Global token linked
`--fs-input-error-message-margin-top`	`var(--fs-spacing-0)`
`--fs-input-error-message-size`	`var(--fs-text-size-legend)`
`--fs-input-error-message-line-height`	`1.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-shadow`	`0 0 0 var(--fs-border-width) var(--fs-input-error-border-color)`
`--fs-input-error-focus-ring`	`var(--fs-color-focus-ring-danger)`

Input Disabled

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

Local token	Default 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-width`	`var(--fs-border-width)`
`--fs-input-disabled-border-color`	`var(--fs-border-color)`

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