Hoppa till huvudinnehåll

ComboBox

Flerval med sök, väljare med sök, dropdown med sök
Version: 1.0.6
Versionslogg
Storybook
Referens

En ComboBox (kombination av Select och TextField) visar en hopfällbar lista med alternativ och låter en användare söka bland dem och välja ett av dem.

ComboBox är en typ av inmatningsfält som används för att välja ett alternativ av fler än fyra (4) av flera alternativ. Om det ska gå att välja flera eller inget alternativ är det Checkbox som ska användas Om det är fler alternativ än färre än fyra (4) används med fördel Radio istället.

Installation och användning​

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

Beroenden

    • react@^18.2.0
    • react-aria-components@^1.1.1

    Riktlinjer​

    Val av komponent​

    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.
    autoFocus boolean-Whether the element should receive focus on render.
    id string-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
    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).
    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.
    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.
    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 "key" | "text"'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​

    Beroenden

      • react@^18.2.0
      • react-aria-components@^1.1.1