Code examples
() => { const transportationTypes = createListCollection({ items: [ { label: "Train", value: "train", }, { label: "Bus", value: "bus", }, { label: "Boat", value: "boat", } ] }) return ( <Select collection={transportationTypes} label="Choose transportation"> {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> {item.label} </SelectItem> ))} </Select> ) }
Guidelines
Select can be used if there are many alternatives that the user can choose from, and when you want to place special emphasis on the choices. Some options may include icons or other graphical elements, such as line tags or other features.
If there are only a few options, consider using Radio buttons instead. If there are many options and users would benefit from being able to search among them, consider using an Autocomplete component.
Code
<Select />
import { Select } from "@vygruppen/spor-react";
Customizable Select, with a bunch of useful props
Props
Name | Type | Required? | Description |
|---|---|---|---|
label | string | A descriptive label of what the user is choosing | |
children | React.ReactNode | (item) => React.ReactNode | Accepts both a list of Item elements or a render function that receives each item passed in the items prop | |
onValueChange | (selectedKey: string | number) => void | ||
open | boolean | Controlling if the menu is open or not | |
onOpenChange | (isOpen: boolean) => void | Callback for when the menu is toggled | |
name | string | The `name` attribute of the underlying select. | |
disabled | boolean | ||
width | ResponsiveValue<string | number> | Default 100% | |
isLabelSrOnly | boolean | Default false. Used to visually hide info, but keep it for screen readers. | |
variant | "core" | "floating" | "rightSideSquare" | "leftSideSquare" | Defaults to core. | |
size | "sm" | "md" | Defaults to "md" | |
readOnly | boolean | Decide if the dropdown list is read only or not, default false | |
collection | ListCollection<T> | Array of items example [{label: "Train", value: "train" }] |
<SelectItem />
import { SelectItem } from "@vygruppen/spor-react";
Used in a InfoSelect or Combobox
Props
Name | Type | Required? | Description |
|---|---|---|---|
key | string | ||
textValue | string | The text version of the item, used by screen readers | |
children | React.ReactNode | The content of the item | |
value | number | string | The value returned when selected | |
item | object[] | Example { label: "Train", value: "train", description: "Tougher than trains", icon: "arrow" } |
styling
This component is built using a slot recipe.
To override the styles for this component globally across your project, refer to the documentation on customizing component stylesEkstern lenke.
You can also target and style specific parts of the Select component using CSS selectors.
Select component parts
- root
- label
- trigger
- indicator-group
- indicator
- content
- item
- control
- item-text
- item-group
- item-group-label
- value-text
- item-description
To override the recipe styles for these parts, use the css prop together with the corresponding slotRecipeParts as CSS selectors.
Use the selector format:
& [data-part="part"] {/* styles */}
Example of customized trigger and label for Select:
() => { const transportationTypes = createListCollection({ items: [ { label: 'Train', value: 'train', }, { label: 'Bus', value: 'bus', }, { label: 'Boat', value: 'boat', }, ], }) return ( <Select collection={transportationTypes} label="Choose transportation" css={{ '& [data-part="trigger"]': { backgroundColor: 'surface.tertiary', }, '& [data-part="label"]': { color: 'text.inverted', }, }} > {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> {item.label} </SelectItem> ))} </Select> ) }