Select

Flerval, väljare, dropdown, rullgardin

Storybook

React Aria

Inmatningsfält som används för att välja ett eller flera fördefinierade 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' },
  ]}
/>

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVälj vilken du vill

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @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' },
  ]}
/>

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVä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' },
  ]}
/>

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVä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' },
  ]}
/>

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVä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' },
  ]}
/>

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVä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}
  />
)

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVä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}
  />
)

Favoritfrukt eller grönsak-hiddenKiwiBananÄppleMorotBroccoli

Favoritfrukt eller grönsakVälj vilken du vill

API

Select

Name	Type	Default	Description
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	-
size	Size	large	Component size (large: height 48px, medium: height 40px)
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	SelectionMode	single	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.