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 |
|---|---|---|---|
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 | |
collection | ListCollection<T> | Array of items example [{label: "Train", value: "train" }] | |
disabled | boolean | ||
isLabelSrOnly | boolean | Default false. Used to visually hide info, but keep it for screen readers. | |
label | string | A descriptive label of what the user is choosing | |
name | string | The `name` attribute of the underlying select. | |
onOpenChange | (isOpen: boolean) => void | Callback for when the menu is toggled | |
onValueChange | (selectedKey: string | number) => void | ||
open | boolean | Controlling if the menu is open or not | |
readOnly | boolean | Decide if the dropdown list is read only or not, default false | |
size | "sm" | "md" | Defaults to "md" | |
variant | "core" | "floating" | "rightSideSquare" | "leftSideSquare" | Defaults to core. | |
width | ResponsiveValue<string | number> | Default 100% |
<SelectItem />
import { SelectItem } from "@vygruppen/spor-react";
Used in a InfoSelect or Combobox
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | The content of the item | |
item | object[] | Example { label: "Train", value: "train", description: "Tougher than trains", icon: "arrow" } | |
key | string | ||
textValue | string | The text version of the item, used by screen readers | |
value | number | string | The value returned when selected |
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> ) }