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-field
data-fs-input-field-error
data-fs-input-field-error-message
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. |