Top
ComboBox - Multiselect
ComboBox
When multiple=true, multiple items can be selected. The selected items are highlighted inside the dropdown list and the corresponding labels are rendered as tags inside the <ComboBox /> input.
By default, the <ComboBox /> does not collapse the list when a value is selected. Specify collapseOnSelect=true to collapse the list on selection.
When multiple selection is enabled, the <ComboBox /> value and defaultValue should be arrays. Also, the onChange is called with an array of ids as a first parameter.
Tags can be navigated with ArrowLeft and ArrowRight keys when the <ComboBox /> is focused, since keyboard tab navigation is enabled by default.
Tags can be deleted either by clicking on the clear button inside the tag, or by pressing Backspace or Delete when the desired tag is active.
When no tag is currently active (so there's no activeTag), when hitting Backspace key and there is no text to the left of the cursor, the last tag is deleted. Or, if the text it's not completely removed, the text is set as search text. This behaviour is controlled by keepTagTextOnRemove.
The maxTagsLength prop controls how many tags can be rendered. After this limit, all tags are combined in a single tag.
The tag label can be customized using renderTagLabel for both normal tags and for the grouped/multiple tag (the tag that groups values beyond the maxTagsLength) limit.
Additionally, you can use the renderTag prop to have access to the tag outer html as well (the actual tag div that contains the label and the clear icon).