Hoppa till huvudinnehåll

Select

Flerval, väljare, dropdown, rullgardin
Storybook
React Aria

Inmatningsfält som används för att välja ett eller flera fördefinerade alternativ.

<Select
  label='Favoritfrukt'
  description='Välj vilken du vill'
  placeholder='Välj en frukt'
  selectionMode='single'
  options={[
    { id: 'apelsin', name: 'Apelsin' },
    { id: 'banan', name: 'Banan' },
    { id: 'citron', name: 'Citron' },
    { id: 'dadel', name: 'Dadel' },
    { id: 'fikon', name: 'Fikon' },
  ]}
/>
Välj vilken du vill

Installation​

npm install @midas-ds/components
import { Select } from '@midas-ds/components'

Riktlinjer​

Om det är färre alternativ än fem bör Radio användas istället.

Beskrivning​

Midas Select är en variant av React Aria Select med möjlighet till flerval.

Varianter​

Flerval​

Använd egenskapen selectionMode="multiple" för att slå på flervalsläget.

<Select
  label='Favoritfrukt'
  description='Välj vilken du vill'
  placeholder='Välj en frukt'
  selectionMode='multiple'
  options={[
    { id: 'apelsin', name: 'Apelsin' },
    { id: 'banan', name: 'Banan' },
    { id: 'citron', name: 'Citron' },
    { id: 'dadel', name: 'Dadel' },
    { id: 'fikon', name: 'Fikon' },
  ]}
/>
Välj vilken du vill

Välj alla​

Egenskapen isSelectableAll kan användas för att lägga till en "Välj alla"-knapp.

<Select
  label='Favoritfrukt'
  description='Välj vilken du vill'
  placeholder='Välj en frukt'
  selectionMode='multiple'
  isSelectableAll
  options={[
    { id: 'apelsin', name: 'Apelsin' },
    { id: 'banan', name: 'Banan' },
    { id: 'citron', name: 'Citron' },
    { id: 'dadel', name: 'Dadel' },
    { id: 'fikon', name: 'Fikon' },
  ]}
/>
Välj vilken du vill

Visa etiketter​

Egenskapen showTags kan användas för att visa valen som etiketter under rullgardinen.

<Select
  label='Favoritfrukt'
  description='Välj vilken du vill'
  placeholder='Välj en frukt'
  selectionMode='multiple'
  showTags
  options={[
    { id: 'apelsin', name: 'Apelsin' },
    { id: 'banan', name: 'Banan' },
    { id: 'citron', name: 'Citron' },
    { id: 'dadel', name: 'Dadel' },
    { id: 'fikon', name: 'Fikon' },
  ]}
/>
Välj vilken du vill

Förvalda alternativ (okontrollerat)​

Använd egenskapen defaultSelectedKeys för att sätta ett initialt värde till komponenten.

<Select
  label='Favoritfrukt'
  description='Välj vilken du vill'
  placeholder='Välj en frukt'
  selectionMode='multiple'
  defaultSelectedKeys={new Set(['banan', 'dadel'])}
  options={[
    { id: 'apelsin', name: 'Apelsin' },
    { id: 'banan', name: 'Banan' },
    { id: 'citron', name: 'Citron' },
    { id: 'dadel', name: 'Dadel' },
    { id: 'fikon', name: 'Fikon' },
  ]}
/>
Välj vilken du vill
2 valda

Kontrollerade val​

Användarens val kan kontrolleras med hjälp av attributet selectedKeys tillsammans med eventet onSelectionChange. Värdet för id skickas tillbaka i callbacken när användaren justerar sitt val, så kan du använda det för att uppdatera ditt state.

import React from 'react'
import { Selection } from 'react-aria-components'

const options = [
  { id: 'apelsin', name: 'Apelsin' },
  { id: 'banan', name: 'Banan' },
  { id: 'citron', name: 'Citron' },
  { id: 'dadel', name: 'Dadel' },
  { id: 'fikon', name: 'Fikon' },
]

const [selectedFruit, setSelectedFruit] = React.useState<Selection>(new Set())

const handleSelectionChange = (keys: Selection) => {
  if (keys === 'all') {
    return setSelectedFruit(new Set(options.map(({ id }) => id)))
  }
  return setSelectedFruit(keys)
}

return (
  <Select
    label='Favoritfrukt'
    description='Välj vilken du vill'
    placeholder='Välj en frukt'
    selectionMode='multiple'
    selectedKeys={selectedFruit}
    onSelectionChange={handleSelectionChange
    isSelectableAll
    options={options}
  />
)
Välj vilken du vill
Selected fruit:

Sektioner​

Vid många val kan alternativen struktureras i sektioner genom att dela in dem enligt följande:

const options = [
  {
    name: 'Frukter',
    children: [
      { id: 'kiwi', name: 'Kiwi' },
      { id: 'banana', name: 'Banan' },
      { id: 'apple', name: 'Äpple' },
    ],
  },
  {
    name: 'Grönsaker',
    children: [
      { id: 'carrot', name: 'Morot' },
      { id: 'broccoli', name: 'Broccoli' },
    ],
  },
]

return (
  <Select
    label='Favoritfrukt eller grönsak'
    description='Välj vilken du vill'
    placeholder='Välj en frukt eller grönsak'
    selectionMode='multiple'
    options={options}
  />
)
Välj vilken du vill

API​

Select​

NameTypeDefaultDescription
isDisabled boolean-

Whether the field is disabled.

className string-

Sets the CSS className for the element.

autoFocus boolean-

Whether the element should receive focus on render.

excludeFromTabOrder boolean-
name string-

Name of the field, for uncontrolled use

errorMessage string-

Error message to be displayed in case of invalid state

isInvalid boolean-

The selection is valid or not

label *string-

The content to display as the label.

placeholder string-

Placeholder value

isRequired boolean-

Whether the field is required.

description string-

Optional description

errorPosition "top" | "bottom"top
disabledKeys Iterable<Key>-

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

isOpen boolean-

Sets the open state of the field (controlled).

defaultOpen boolean-

Sets the default open state of the field (uncontrolled).

selectionMode SelectionModesingle

The type of selection that is allowed in the collection.

selectedKeys Iterable<Key> | "all"-

The currently selected keys in the collection (controlled).

defaultSelectedKeys Iterable<Key> | "all"-

The initial selected keys in the collection (uncontrolled).

isClearable boolean-

Whether the field can be emptied.

isSelectableAll boolean-

Whether to show a button to select all items.

showTags boolean-

Show selected items as tags below select

options *Option[]-

Item objects in the collection.