Multi Select

Multi Select allows users to choose one or more options from a filterable dropdown list. Supports keyboard navigation, validation states, and dense mode (compact) for space-constrained layouts.

diwa-multi-select — Properties

Name	Type	Default	Description
`theme`	`'light' \| 'dark'`	`'dark'`	Per-component theme override. Sets data-theme on the host so token overrides cascade into Shadow DOM.
`label`	`string`	`undefined`	Visible label text. Also used as the placeholder when no options are selected.
`description`	`string`	`undefined`	Optional hint text rendered between the label and the trigger.
`name`	`string`	`''`	Field name emitted in the change event detail.
`value`	`string[]`	`[]`	Currently selected values. Mutable — updated by user interaction and programmatic assignment.
`state`	`'none' \| 'error' \| 'success'`	`'none'`	Validation state. Changes trigger border colour and message text colour.
`message`	`string`	`undefined`	Helper or validation message. Only rendered when state is "error" or "success".
`hide-label`	`boolean`	`false`	Hides the label visually using a sr-only clip pattern. The label is still read by screen readers.
`disabled`	`boolean`	`false`	Disables all interaction. The trigger loses tabIndex and its opacity is reduced.
`required`	`boolean`	`false`	Marks the field as required with a visual asterisk and sets aria-required on the trigger.
`compact`	`boolean`	`false`	Reduces the trigger and option row heights for dense layout contexts.
`dropdown-direction`	`'auto' \| 'down' \| 'up'`	`'auto'`	Controls which direction the panel opens. 'auto' flips upward when there is insufficient space below.

diwa-multi-select — Events

Name	Detail type	Bubbles	Description
`change`	`{ name: string; value: string[] }`	Yes	Emitted when the selection changes. detail.value is the full updated array of selected values.
`toggle`	`{ open: boolean }`	No	Emitted when the dropdown opens or closes.
`blur`	`void`	No	Emitted when the dropdown closes due to a click outside the component.

React 19: use lowercase event names as props: onchange, ontoggle, onblur.

diwa-multi-select — Methods

Signature	Description
`open(): Promise<void>`	Programmatically opens the dropdown panel.
`close(): Promise<void>`	Programmatically closes the dropdown panel.

diwa-multi-select — Slots

Name	Description
(default)	diwa-multi-select-option elements.
`label`	Custom label content — overrides the label prop.
`description`	Custom description content.
`message`	Custom message content.
`selected`	Custom selected-value display inside the trigger.
`filter`	Custom filter input; disables the built-in text filter.
`options-status`	Loading indicator or custom empty state for async patterns.

diwa-multi-select-option — Properties

Name	Type	Default	Description
`value`	`string`	`required`	The value emitted when this option is selected. Must be unique within the multi-select.
`disabled`	`boolean`	`false`	Disables the option — it cannot be selected or focused.
`selected`	`boolean`	`false`	Whether the option is currently selected. Managed by the parent; can be set to pre-select.
`highlighted`	`boolean`	`false`	Whether the option is keyboard-highlighted. Set exclusively by the parent component.
`compact`	`boolean`	`false`	Dense mode (compact) — inherited automatically from the parent diwa-multi-select.
`theme`	`'light' \| 'dark'`	`'dark'`	Theme — inherited automatically from the parent diwa-multi-select.