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
_10import { 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';
For details, see Importing FastStore UI component styles.
Examples
Variants
Disabled
Example
Code
Design tokens
Local token | Default value/Global token linked |
---|---|
--fs-select-height | var(--fs-spacing-6) |
--fs-select-min-height | var(--fs-control-tap-size) |
--fs-select-padding | var(--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-radius | var(--fs-border-radius) |
--fs-select-bkg | transparent |
--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-timing | var(--fs-transition-timing) |
--fs-select-transition-property | var(--fs-transition-property) |
--fs-select-transition-function | var(--fs-transition-function) |
Design tokens: Icon
Local token | Default value/Global token linked |
---|---|
--fs-select-icon-color | var(--fs-color-link) |
--fs-select-icon-position-right | var(--fs-spacing-2) |
--fs-select-icon-width | var(--fs-spacing-3) |
--fs-select-icon-height | var(--fs-select-icon-width) |
Design tokens: Disabled
Local token | Default value/Global token linked |
---|---|
--fs-select-disabled-text-color | var(--fs-color-disabled-text) |
--fs-select-disabled-text-opacity | 1 |
Data attributes
You can target and override
Select
styles using the following data attributes:data-fs-select
data-fs-select-icon
Props
Name | Type | Description | Default |
---|---|---|---|
testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-select |
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. |
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.
Related components
- SelectField
SelectField wraps a Select input and its corresponding Label. It allows users to select one option from a set.
See more