Select Field

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

Overview

Import

Import the component from @faststore/ui

import { SelectField } from '@faststore/ui'

Import Styles

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

Usage

Order by:

<SelectField
  id="select-order-by"
  label="Order by:"
  options={{
    name_asc: 'Name, A-Z',
    name_desc: 'Name, Z-A',
    top_sales: 'Top Sales',
  }}
/>

Props

Name	Type	Description	Default
Coming Soon

Design Tokens

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)`

Customization

For further customization, you can use the following data attributes:

data-fs-select-field

data-fs-select-field-label

Search Top Sku Selector