ComboBox

Flerval med sök, väljare med sök, dropdown med sök

Storybook

React Aria

En ComboBox är en sökbar version av Select. Combobox används för att välja ett alternativ av fler än fyra (4) alternativ.

<ComboBox
  label='Välj din favoritfrukt'
  description='Du kan bara välja en'
>
  <ComboBoxItem id='Lime'>Lime</ComboBoxItem>
  <ComboBoxItem id='Äpple'>Äpple</ComboBoxItem>
  <ComboBoxItem id='Banan'>Banan</ComboBoxItem>
  <ComboBoxItem id='Kiwi'>Kiwi</ComboBoxItem>
  <ComboBoxItem id='Apelsin'>Apelsin</ComboBoxItem>
</ComboBox>

Välj din favoritfruktDu kan bara välja en

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

Kontrollerat val

Använd attributet id och eventet onSelectionChange för att använda controlled value på ComboBox. Den valda ComboBoxItems värde skickas till callbacken, så kan du använda det för att uppdatera ditt state.

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

const [selectedFruit, setSelectedFruit] = React.useState<Key | null>(null)

return (
  <ComboBox
    label='Välj din favoritfrukt eller grönsak'
    description='Du kan bara välja en'
    selectedKey={selectedFruit}
    onSelectionChange={setSelectedFruit}
  >
    <ComboBoxItem id='Lime'>Lime</ComboBoxItem>
    <ComboBoxItem id='Äpple'>Äpple</ComboBoxItem>
    <ComboBoxItem id='Banan'>Banan</ComboBoxItem>
    <ComboBoxItem id='Kiwi'>Kiwi</ComboBoxItem>
    <ComboBoxItem id='Apelsin'>Apelsin</ComboBoxItem>
  </ComboBox>
)

Välj din favoritfruktDu kan bara välja en

Vald frukt: 

Riktlinjer

Val av komponent

• Om det ska gå att välja flera eller inga alternativ är det Checkbox eller Select som ska användas.
• Om det är färre alternativ än fyra (4) används med fördel Radio istället.

Sektioner

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

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

const options = [
  {
    name: 'Grönsaker',
    id: 123,
    children: [
      { name: 'Morot', id: 2 },
      { name: 'Broccoli', id: 3 },
      { name: 'Spenat', id: 4 },
      { name: 'Potatis', id: 5 },
      { name: 'Tomat', id: 6 },
    ],
  },
  {
    name: 'Frukter',
    id: 1234,
    children: [
      { name: 'Äpple', id: 11 },
      { name: 'Banan', id: 12 },
      { name: 'Kiwi', id: 13 },
      { name: 'Fläder', id: 14 },
      { name: 'Nektarin', id: 15 },
    ],
  },
]

return (
  <ComboBox
    label='Välj din favoritfrukt eller grönsak'
    description='Du kan bara välja en'
    items={options}
  >
    {(section: Section<Item>) => <ComboBoxSelection {...section} />}
  </ComboBox>
)

Välj din favoritfrukt eller grönsakDu kan bara välja en

API

ComboBox

Name	Type	Default	Description
label	string	-
description	string	-
errorMessage	string | ((validation: ValidationResult) => string)	-
items	Iterable<T>	-	The list of ComboBox items (controlled).
placeholder	string	-
errorPosition	"top" | "bottom"	top
isDisabled	boolean	-	Whether the input is disabled.
className	string | ((values: ComboBoxRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: ComboBoxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
id	string	-	The element's unique identifier. See MDN.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
autoFocus	boolean	-	Whether the element should receive focus on render.
name	string	-	The name of the input element, used when submitting an HTML form. See MDN.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isInvalid	boolean	-	Whether the input value is invalid.
validationBehavior	"native" | "aria"	'native'	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.
isRequired	boolean	-	Whether user input is required on the input before form submission.
validate	(value: ComboBoxValidationValue) => 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.
selectedKey	Key	-	The currently selected key in the collection (controlled).
defaultSelectedKey	Key	-	The initial selected key in the collection (uncontrolled).
shouldFocusWrap	boolean	-	Whether keyboard navigation is circular.
defaultItems	Iterable<T>	-	The list of ComboBox items (uncontrolled).
inputValue	string	-	The value of the ComboBox input (controlled).
defaultInputValue	string	-	The default value of the ComboBox input (uncontrolled).
allowsCustomValue	boolean	-	Whether the ComboBox allows a non-item matching input value to be set.
menuTrigger	MenuTriggerAction	'input'	The interaction required to display the ComboBox menu.
disabledKeys	Iterable<Key>	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
defaultFilter	(textValue: string, inputValue: string) => boolean	-	The filter function used to determine if a option should be included in the combo box list.
formValue	"text" | "key"	'key'	Whether the text or key of the selected item is submitted as part of an HTML form. When allowsCustomValue is true, this option does not apply and the text is always submitted.
allowsEmptyCollection	boolean	-	Whether the combo box allows the menu to be open when the collection is empty.

ComboBoxItem