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
Coming Soon

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