Input Field
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
| 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. |
Design Tokens
| 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) |
Nested Elements
Label
| Local token | Default value/Global token linked |
|---|---|
--fs-input-field-label-padding | 0 var(--fs-spacing-2) |
--fs-input-field-label-color | var(--fs-color-text-light) |
--fs-input-field-label-size | var(--fs-text-size-tiny) |
Button
| Local token | Default value/Global token linked |
|---|---|
--fs-input-field-button-height | var(--fs-control-tap-size) |
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 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) |
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) |
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