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.
Default
Six options with no pre-selection. Type in the filter input to narrow the list.
<diwa-multi-select label="Favourite fruits" name="fruits">
<diwa-multi-select-option value="apple">Apple</diwa-multi-select-option>
<diwa-multi-select-option value="banana">Banana</diwa-multi-select-option>
<diwa-multi-select-option value="cherry">Cherry</diwa-multi-select-option>
<diwa-multi-select-option value="dragonfruit">Dragon Fruit</diwa-multi-select-option>
<diwa-multi-select-option value="elderberry">Elderberry</diwa-multi-select-option>
<diwa-multi-select-option value="fig">Fig</diwa-multi-select-option>
</diwa-multi-select>With description and message
Use description to add a hint beneath the label, and message + state to show validation feedback.
<diwa-multi-select label="Allergies" name="allergies" description="Select all that apply." state="error" message="At least one allergy is required.">
<diwa-multi-select-option value="gluten">Gluten</diwa-multi-select-option>
<diwa-multi-select-option value="dairy">Dairy</diwa-multi-select-option>
<diwa-multi-select-option value="nuts">Tree nuts</diwa-multi-select-option>
<diwa-multi-select-option value="shellfish">Shellfish</diwa-multi-select-option>
</diwa-multi-select>Disabled
The entire component is non-interactive. The trigger is dimmed and keyboard focus is removed.
<diwa-multi-select label="Operating systems" name="os" disabled>
<diwa-multi-select-option value="linux" selected>Linux</diwa-multi-select-option>
<diwa-multi-select-option value="macos">macOS</diwa-multi-select-option>
<diwa-multi-select-option value="windows">Windows</diwa-multi-select-option>
</diwa-multi-select>Compact
Enables dense mode by reducing the trigger height from 44 px (default touch target) to 32 px. Use in toolbars, sidebars, or data-dense layouts.
<diwa-multi-select label="Tags" name="tags" compact>
<diwa-multi-select-option value="bug">Bug</diwa-multi-select-option>
<diwa-multi-select-option value="feature">Feature</diwa-multi-select-option>
<diwa-multi-select-option value="docs">Docs</diwa-multi-select-option>
<diwa-multi-select-option value="chore">Chore</diwa-multi-select-option>
</diwa-multi-select>With disabled options
Individual options can be disabled via the disabled attribute on diwa-multi-select-option.
<diwa-multi-select label="Subscription tier" name="tier">
<diwa-multi-select-option value="free">Free</diwa-multi-select-option>
<diwa-multi-select-option value="pro">Pro</diwa-multi-select-option>
<diwa-multi-select-option value="enterprise" disabled>Enterprise (contact sales)</diwa-multi-select-option>
</diwa-multi-select>