Overview

#

KMultiSelect is a searchable select component that supports single and multiple selections, flat arrays, and deeply nested hierarchical trees with cascading selection behavior.

Messages

#

KMultiSelect requires a messages object with 7 required keys, each a function returning a translated string. Additional optional keys enable further live-region announcements.

Usage

#

Multiple selection

#

Selecting multiple items from a flat list of objects using itemText and itemValue to map object properties.

Single selection

#

Selecting a single item from a flat list using :multiple="false". Use appearanceOverrides to constrain the width.

Multi-field search

#

Searching across multiple fields on each option using the searchKeys prop. Try typing a native script form or a related term to see matches across all configured fields.

Hierarchical tree

#

Options with a level field render as a nested tree. The autoSelectChild and autoSelectParent props control how a selection cascades through the tree. Use at most one of them, since each gives a checked parent a different meaning.

Cascading selection

With autoSelectChild, selecting or deselecting a parent cascades to its children. A parent is checked when all of its children are selected and indeterminate when only some are, no matter how it was selected.

Independent selection

Without the cascade props, each option is selected on its own, so checking a parent selects only the parent, and a parent you check directly stays checked when its children change. By default, selecting all children of a parent also selects the parent; this example turns that off with :autoPromoteParent="false", so the value stays limited to exactly what you select and a fully covered parent shows as indeterminate.

Automatic parent selection

With autoSelectParent, selecting an option also selects all of the parents above it, so the value always contains the full path to every selected option, ordered from parent to child. A selected parent shows as indeterminate while only some of the options under it are selected. A parent selected this way is removed when the last selected option under it is deselected, while a parent you select directly stays selected. Deselecting a parent deselects everything under it.

Primitive values

#

Using a flat array of primitive values (numbers or strings) instead of objects. No itemText or itemValue mapping is needed.

Related

#

• KSelect for simpler, non-searchable dropdowns without tokenization.
• KListbox which powers the underlying dropdown menu and keyboard navigation for this component.

Props

#

Slots

#