Hoppa till huvudinnehåll

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.

Installation​

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

Riktlinjer​

Val av komponent​

  • Om det ska gå att välja flera eller inget 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.

API​

ComboBox​

NamnTypStandardBeskrivning
label string-
description string-
errorMessage string | ((validation: ValidationResult) => string)-
items Iterable<T>-The list of ComboBox items (controlled).
placeholder string-
isDisabled boolean-Whether the input is disabled.
className string | ((values: ComboBoxRenderProps & { defaultClassName: string; }) => string)-The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
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.
isReadOnly boolean-Whether the input can be selected but not changed by the user.
isRequired boolean-Whether user input is required on the input before form submission.
isInvalid boolean-Whether the input value is invalid.
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​