Select

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

Overview

Import

Import the component from @faststore/ui

import { Select } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

<Select
  options={{
    great: 'Great',
    ok: 'Ok',
    bad: 'Bad',
  }}
/>

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.

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

Nested Elements

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

Variants

Disabled

<Select
  id="select-disabled"
  options={{
    great: 'Great',
    ok: 'Ok',
    bad: 'Bad',
  }}
  disabled
/>

Local token	Default value/Global token linked
`--fs-select-disabled-text-color`	`var(--fs-color-disabled-text)`
`--fs-select-disabled-text-opacity`	`1`

Customization

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

data-fs-select

data-fs-select-icon

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

Order by:
SelectField
SelectField wraps a Select input and its corresponding Label. It allows users to select one option from a set.
See more

Radio Skeleton