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
_10import { 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";
For details, see Importing FastStore UI component styles.
Examples
Variants
Actionable
Example
Code
Actionable w/ Error
Example
Code
Error Message
Error
Example
Code
Error Message
Disabled
Example
Code
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) |
Design tokens: 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) |
Design tokens: Button
| Local token | Default value/Global token linked |
|---|---|
--fs-input-field-button-height | var(--fs-control-tap-size) |
Design tokens: Error
| 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) |
Design tokens: 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) |
Data attributes
You can target and override
InputField styles using the following data attributes:data-fs-input-fielddata-fs-input-field-errordata-fs-input-field-error-messageProps
| 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. |