Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
Select

Selects allow users to pick an option from a predefined list.

Select components allow users to pick an option from a predefined list. The Select component should be used when there are more than five options available. Otherwise, consider using the RadioGroup component.
Example
Code

Usage

Import the component


_10
import { Select } from '@faststore/ui'

Import styles

To apply styles, include the following in your stylesheet:

_10
@import '@faststore/ui/src/components/atoms/Select/styles.scss';


Examples

Variants

Disabled

Example
Code

Design tokens

Local tokenDefault value/Global token linked
--fs-select-heightvar(--fs-spacing-6)
--fs-select-min-heightvar(--fs-control-tap-size)
--fs-select-paddingvar(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2)
--fs-select-text-color
var(--fs-color-link)
--fs-select-border-radiusvar(--fs-border-radius)
--fs-select-bkgtransparent
--fs-select-bkg-color-focus
var(--fs-color-primary-bkg-light)
--fs-select-bkg-color-hover
var(--fs-select-bkg-color-focus)
--fs-select-transition-timingvar(--fs-transition-timing)
--fs-select-transition-propertyvar(--fs-transition-property)
--fs-select-transition-functionvar(--fs-transition-function)

Design tokens: Icon

Local tokenDefault value/Global token linked
--fs-select-icon-color
var(--fs-color-link)
--fs-select-icon-position-rightvar(--fs-spacing-2)
--fs-select-icon-widthvar(--fs-spacing-3)
--fs-select-icon-heightvar(--fs-select-icon-width)

Design tokens: Disabled

Local tokenDefault value/Global token linked
--fs-select-disabled-text-color
var(--fs-color-disabled-text)
--fs-select-disabled-text-opacity1

Data attributes

You can target and override Select styles using the following data attributes:
data-fs-select
data-fs-select-icon

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-select
id*stringAssigns 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.

Best Practices

✅ Do's

  • Consider using a RadioGroup when few options are available. Doing so will prevent users from opening a dropdown box just to scan how many and which options are available.
  • Consider using an open text Input when several options are available and if the entries don’t need to be validated. Doing so will prevent users from having to read and understand all options before making a choice.
  • Consider using an autocomplete field when multiple options are available and if the inputs need to be validated.
  • Opt to grey out unavailable items instead of removing them completely.

Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
On this page