Multi Select

Custom multiple selection dropdown with keyboard navigation and form integration

Features Overview

Now.js provides a powerful multi-select component that transforms native <select multiple> elements into beautiful, accessible dropdowns:

ðŸŽŊ Custom UI

Beautiful dropdown with check/uncheck icons

<select multiple>

âŒĻïļ Keyboard Navigation

Full keyboard support with Arrow keys, Space, Tab, Escape

ArrowUp/Down, Space, Enter

ðŸ“ą Accessible

ARIA attributes for screen readers

role="listbox"

🏷ïļ Smart Display

Shows selected items with "+n items" overflow

data-max-display="2"

📊 Form Integration

Seamless integration with FormManager

data-form="myForm"

🔗 Dynamic Options

Load options from API or JavaScript

data-options-key="items"

API Reference

Multi-select attributes for customization:

Attribute Type Default Description
multiple boolean - Required. Enables multiple selection mode
data-placeholder string - Placeholder text when no items selected
data-max-display number 2 Max items to show before "+n items"
data-options-key string - Key to extract options from API response
data-attr string - Data binding (e.g., "value:selectedItems")
required boolean false Require at least one selection
disabled boolean false Disable the select element

Code Examples

Example 1: Basic Multi Select

Simple multiple selection with static options:


            <select name="colors" multiple data-placeholder="Select colors...">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            </select>

Example 2: With Form Integration

Multi-select inside a form with validation:


            <form data-form="myForm" data-validate="true">
            <label>Select Categories</label>
            <select name="categories" multiple required
            data-placeholder="Choose categories...">
            <option value="tech">Technology</option>
            <option value="health">Health</option>
            <option value="sports">Sports</option>
            </select>
            <button type="submit">Submit</button>
            </form>

Example 3: Dynamic Options from API

Load options from API response:


            <!-- HTML -->
            <form data-form="locationForm" data-load-api="get-options.php">
            <select name="provinces" multiple
            data-options-key="provinces"
            data-placeholder="Select provinces...">
            </select>
            </form>
          

            // API Response Format (get-options.php)
            {
            "data": {
            "provinces": [
            {"value": "10", "text": "āļāļĢāļļāļ‡āđ€āļ—āļžāļĄāļŦāļēāļ™āļ„āļĢ"},
            {"value": "11", "text": "āļŠāļĄāļļāļ—āļĢāļ›āļĢāļēāļāļēāļĢ"},
            {"value": "12", "text": "āļ™āļ™āļ—āļšāļļāļĢāļĩ"}
            ]
            }
            }

Example 4: JavaScript API

Programmatic control of multi-select:


            // Get instance
            const selectEl = document.querySelector('select[name="colors"]');
            const instance = ElementManager.getInstanceByElement(selectEl);

            // Set values
            instance.setValue(['red', 'blue']);

            // Get selected values
            const values = instance.getValue(); // ['red', 'blue']

            // Update options dynamically
            instance.updateOptions([
            {value: 'purple', text: 'Purple'},
            {value: 'orange', text: 'Orange'}
            ]);

            // Clear selection
            instance.clear();

Live Demo

Try the multi-select component with different configurations:

Demo 1: Thai Address Selection

Select multiple provinces, districts, and subdistricts from Thailand:

Select Locations
Select one or more provinces
Select one or more districts
Select one or more subdistricts

Demo 2: Skills Selection with Validation

Select Your Skills
Select at least one programming language
Optional: Select frameworks you know

Keyboard Navigation

The multi-select component supports full keyboard navigation:

Key Action
Enter / Space Open dropdown (when trigger is focused)
↓ Arrow Down Move highlight to next item
↑ Arrow Up Move highlight to previous item
Space Toggle selection of highlighted item
Tab / Escape Close dropdown