SelectField

Groups a Select input and its corresponding Label.

The SelectField component wraps a Select input and its corresponding Label. It allows users to select one option from a set.

Example

Code

Select a Status:

Usage


_10import { SelectField } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


_10@import '@faststore/ui/src/components/molecules/SelectField/styles.scss';

Local token	Default value/Global token linked
`--fs-select-label-color`	`var(--fs-color-text-light)`
`--fs-select-label-margin-right`	`var(--fs-spacing-1)`

You can target and override SelectField styles using the following data attributes:

data-fs-select-field

data-fs-select-field-label

Name	Type	Description	Default
label*	`string`	Defines the text displayed in the label right next to the Select.
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-select-field`
id*	`string`	Assigns an identifier to link the UISelect component and its label.
options*	`Record<string, string>`	Defines the options available in the select. The SelectOptions object keys are the property names, while the values correspond to the text that will be displayed in the UI.