Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Select

Selects are dropdown lists with custom-designed options.

FigmaGitHub

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

Selects should be used 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.

Trenger du det egentlig?

Vurdér alltid om du egentlig trenger en info select komponent - som regel er det en bedre brukeropplevelse å bruke NativeSelect-komponenten istedenfor.

Code

<Select />

import { Select } from "@vygruppen/spor-react";

Customizable Select, with a bunch of useful props

Props

Name
Type
Required?
Description
childrenReact.ReactNode | (item) => React.ReactNodeAccepts both a list of Item elements or a render function that receives each item passed in the items prop
collectionListCollection<T>Array of items example [{label: "Train", value: "train" }]
disabledboolean
isLabelSrOnlybooleanDefault false. Used to visually hide info, but keep it for screen readers.
labelstringA descriptive label of what the user is choosing
namestringThe `name` attribute of the underlying select.
onOpenChange(isOpen: boolean) => voidCallback for when the menu is toggled
onValueChange(selectedKey: string | number) => void
openbooleanControlling if the menu is open or not
readOnlybooleanDecide if the dropdown list is read only or not, default false
variant"core" | "floating" | "rightSideSquare" | "leftSideSquare"Defaults to core.
widthResponsiveValue<string | number>Default 100%

<SelectItem />

import { SelectItem } from "@vygruppen/spor-react";

Used in a InfoSelect or Combobox

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe content of the item
itemobject[]Example { label: "Train", value: "train", description: "Tougher than trains", icon: "arrow" }
keystring
textValuestringThe text version of the item, used by screen readers
valuenumber | stringThe value returned when selected

styling

This component is built using a slot recipe.

Slot recipe for Select

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