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.

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

<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

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.

Enkelval

Standardvärdet för selectionMode är single, om du inte anger selectionMode kan användaren bara välja ett värde.

Kontrollerat 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.

För att komponenten också stödjer flerval benämns selectedKeys i plural och värdet för id kommer tillbaka som en Selection. Eftersom att vi vet att alternativet "all" inte kommer ges så kan vi skicka setSelectedFruit direkt till onSelectionChange till skillnad från exemplet för flerval.

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

return (
  <Select
    label='Favoritfrukt'
    description='Välj vilken du vill'
    placeholder='Välj en frukt'
    options={options}
    selectedKeys={selectedFruit}
    onSelectionChange={setSelectedFruit}
  />
)

Favoritfrukt-hiddenApelsinBananCitronDadelFikon

FavoritfruktVälj vilken du vill

Selected fruit: 

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

Se kontrollerat val vid enkelval för en beskrivning av typerna för selectedKeys och onSelectionChange.

Notera den manuella hantering som görs om användaren klickar på "Välj alla"

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
label *	string	-	The content to display as the label.
isDisabled	boolean	-	Whether the field is disabled.
autoFocus	boolean	-	Whether the element should receive focus on render.
className	string	-	Sets the CSS className for the element.
name	string	-	Name of the field, for uncontrolled use
placeholder	string	-	Placeholder value
size	Size	'large'	Component size (large: height 48px, medium: height 40px)
isRequired	boolean	-	Whether the field is required.
isInvalid	boolean	-	The selection is valid or not
validationState	ValidationState	-	@deprecated Use isInvalid instead.
validationBehavior	"aria" | "native"	'aria'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
validate	(value: boolean) => true | ValidationError	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
excludeFromTabOrder	boolean	-
defaultOpen	boolean	-	Sets the default open state of the field (uncontrolled).
isClearable	boolean	true	Whether the field can be emptied.
isSelectableAll	boolean	-	Whether to show a button to select all items.
isOpen	boolean	-	Sets the open state of the field (controlled).
description	string	-	Optional description
showTags	boolean	-	Show selected items as tags below select
selectionMode	SelectionMode	'single'	The type of selection that is allowed in the collection.
errorMessage	string	-	Error message to be displayed in case of invalid state
errorPosition	"top" | "bottom"	"top"	The position of the error message
shouldFlip	boolean	true	Whether the menu should automatically flip direction when space is limited.
disabledKeys	Iterable<Key>	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
disallowEmptySelection	boolean	-	Whether the collection allows empty selection.
selectedKeys	Iterable<Key> | "all"	-	The currently selected keys in the collection (controlled).
defaultSelectedKeys	Iterable<Key> | "all"	-	The initial selected keys in the collection (uncontrolled).
isLoading	boolean	-	Whether the items are currently loading.
options *	ListBoxOption[]	-	Item objects in the collection.