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.Overview
Example
Code
Error Message
Error Message
Import
Import the component from @faststore/ui
_10import { 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:
_10@import '@faststore/ui/src/components/molecules/InputField/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<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-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
_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 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
_10<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-fielddata-fs-input-field-errordata-fs-input-field-error-message