MultiSelect Component

Enhanced select component for Bootstrap 5.3 with search, tags, and grouping capabilities.

Basic MultiSelect

Simple multiple selection with search functionality.

Select Programming Languages

Selected Values:

[]

const multiSelect = new MultiSelect('#basic-select', {
	searchable: true,
	placeholder: 'Select languages...',
	showTags: true
});

Grouped Options

Options organized by categories with custom group headers.

Select Technologies

Selected Technologies:

[]

const groupedSelect = new MultiSelect('#grouped-select', {
	searchable: true,
	groupBy: 'category',
	maxSelections: 6,
	sortSelected: true
});

Custom Rendering

Custom option and tag templates with rich content.

Select Team Members

Selected Members:

[]

const customSelect = new MultiSelect('#custom-select', {
	customRenderer: (option) => {
		return `<div class="d-flex align-items-center">
			<div class="avatar me-2">${option.avatar}</div>
			<div>
				<div>${option.text}</div>
				<small>${option.role}</small>
			</div>
		</div>`;
	}
});

Size Variations

Different component sizes to match your design.

Small

Normal

Large

API Methods

Programmatic control of the component.

API Demo

API Events Log:

Form Integration

Integration with Bootstrap form validation.