Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Multi-Select Dropdown: Flexible & Intuitive

Enhance Your Forms with a User-Friendly Selection Component

Our multi-select dropdown component allows users to choose multiple options effortlessly. Ideal for forms, filters, and settings, it improves usability by providing a clean and interactive selection experience.

Key Features:

  • Responsive Design: Works seamlessly across different devices, ensuring a smooth user experience.
  • Searchable Options: Quickly find and select items from large lists using the built-in search functionality.
  • Custom Styling: Easily modify colors, borders, and fonts to align with your brand’s theme.
  • Tag-Based Selection: Selected items are displayed as tags, allowing users to see and remove choices conveniently.
  • Keyboard Navigation: Supports arrow keys and shortcuts for enhanced accessibility and efficiency.

General Multiselect

This is a general multiselect dropdown that allows users to select multiple options from a list. It is commonly used in forms, filters, and settings where multiple selections are required.

Source Code 

<div class="multiselect-container">
    <div id="flatArrayMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx" placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    // Demo data
    const dataArray = [
        { key: "Option 1" },
        { key: "Option 2" },
        { key: "Option 3" },
        { key: "Option 4" },
        { key: "Option 5" },
        { key: "Option 6" },
        { key: "Option 7" }
    ];

    // Array Multiselect
    CT.CeMiSt({
        containerId: 'flatArrayMultiselect',
        data: dataArray,
        closeWhenSelected: true,
        dropDownHeight: '150px',
        customCss: {
            optionFontSize: '12px',
            optionFontWeight: '600',
            optionColor: '#FFFFFF',
            optionBorder: '1px solid #989898',
            optionBackground: '#000000',
            optionPadding: '8px',
            optionHoverBackground: 'lightblue',
            optionHoverColor: '#000000',
            chipBorder: '1px solid #000000',
            chipColor: '#000000',
            chipBackgroundColor: '#FFC300',
        },
        cb: (item) => {
            console.log(item);
        }
    });
});

Multiselect with preselect values

This multiselect dropdown comes with preselected values, allowing users to quickly see their current selections. It is useful for scenarios where default options are commonly chosen.

Source Code 

<div class="multiselect-container">
    <div id="preselectedMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>                
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    const selectedValues = [
        { key: "Option 1", cat: "Group 1" },
        { key: "Option 2", cat: "Group 1" }
    ];

    // Preselected Multiselect
    CT.CeMiSt({
        containerId: 'preselectedMultiselect',
        data: objectArray,
        displayValue: 'key',
        selectedValues: selectedValues,
        cb: (item) => {
            console.log(item);
        }
    });
});

Disable preselected values

This multiselect dropdown allows you to disable certain preselected values, preventing users from selecting them again. This is useful for scenarios where certain options should remain unchangeable.

Source Code 

<div class="multiselect-container">
    <div id="disabledMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>                
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    const selectedValues = [
        { key: "Option 1", cat: "Group 1" },
        { key: "Option 2", cat: "Group 1" }
    ];

    // Disabled Multiselect
    CT.CeMiSt({
        containerId: 'disabledMultiselect',
        data: objectArray,
        displayValue: 'key',
        selectedValues: selectedValues,
        disableValues: [
            { key: "Option 1", cat: "Group 1" },
            { key: "Option 2", cat: "Group 1" }
        ],
        cb: (item) => {
            console.log(item);
        }
    });
});

Multiselect with checkbox

This multiselect dropdown includes checkboxes for each option, allowing users to select multiple items easily. It is ideal for scenarios where users need to make multiple selections from a list.

Source Code 

<div class="multiselect-container">
    <div id="checkboxMultiselect">
        <div class="multiselect-input PnRe">
            <input class="TtBx" type="text" placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    CT.CeMiSt({
        containerId: 'checkboxMultiselect',
        data: objectArray,
        displayValue: 'key',
        showCheckbox: true,
        cb: (item) => {
            console.log(item);
        }
    });
});

Multiselect with grouping

This multiselect dropdown allows you to group options into categories, making it easier for users to navigate and select items. It is useful for scenarios where options can be logically categorized.

Source Code 

<div class="multiselect-container">
    <div id="groupMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    // Grouped Multiselect
    CT.CeMiSt({
        containerId: 'groupMultiselect',
        data: objectArray,
        displayValue: 'key',
        groupBy: 'cat',
        showCheckbox: true,
        cb: (item) => {
            console.log(item);
        }
    });
});

Multiselect with selection limit Ex:2

This multiselect dropdown allows you to set a limit on the number of selections users can make. It is useful for scenarios where only a certain number of options should be selected at a time.

Source Code 

<div class="multiselect-container">
    <div id="limitMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    // Selection Limit Multiselect
    CT.CeMiSt({
        containerId: 'limitMultiselect',
        data: objectArray,
        displayValue: 'key',
        selectionLimit: 2,
        cb: (item) => {
            console.log(item);
        }
    });
});

Custom placeholder

This multiselect dropdown allows you to set a custom placeholder text, providing users with a clear indication of what to do. It is useful for scenarios where you want to guide users on how to use the component.

Source Code 

<div class="multiselect-container">
    <div id="placeholderMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    // Custom Placeholder Multiselect
    CT.CeMiSt({
        containerId: 'placeholderMultiselect',
        data: objectArray,
        displayValue: 'key',
        placeholder: 'Custom Placeholder',
        cb: (item) => {
            console.log(item);
        }
    });
});

CSS Customization

This is customized multiselect dropdown that allows you to apply custom CSS styles to the options and chips. It is useful for scenarios where you want to match the component's appearance with your application's design.

Source Code 

<div class="multiselect-container">
    <div id="customStyleMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    // CSS Customization Multiselect
    CT.CeMiSt({
        containerId: 'customStyleMultiselect',
        data: objectArray,
        displayValue: 'key',
        customStyle: true,
        customCss: {
            option: 'Br1',
            chipColor: '#000000',
            chipBackgroundColor: '#FFC300',
        },
        cb: (item) => {
            console.log(item);
        }
    });

});

Close Icons

You can customize the close icon in the multiselect dropdown. This allows you to use different icons or styles for closing the dropdown, enhancing the user experience.

Source Code 

<div class="multiselect-container">
    <div id="customStyleMultiselect">
        <div class="multiselect-input PnRe">
            <input type="text" class="TtBx"  placeholder="Select options" readonly>
        </div>
    </div>
</div>


document.addEventListener('DOMContentLoaded', function () {
    const objectArray = [
        { key: "Option 1", cat: "Group 1" }, // key, category
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
    ];

    // Close Icons Multiselect
    CT.CeMiSt({
        containerId: 'iconsMultiselect',
        data: objectArray,
        displayValue: 'key',
        selectedValues: selectedValues,
        closeIcon: '✕',
        cb: (item) => {
            console.log(item);
        }
    });

});
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...