Select

Select - Bootstrap 5 & Material Design 2.0

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.

Basic example

Multiselect

Add multiple attribute to the select element to activate multiple mode.

Example label


                        
                        Example label

Select with label

It is possible to add select label by creating element with .form-label and .select-label classes.

Example label


                        
                        Example label

Select with placeholder

Use placeholder option to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.

Disabled select

Add disabled attribute to the select element to disable select input.

Disabled options

Use disabled attribute on option element to disable specific option.

Clear button

Set clearButton option to true to display the button that will allow to clear current selections.

Custom content

A custom content container with a class .select-custom-content will be displayed at the end of the select dropdown.

Visible options

Use visibleOptions option to change the number of options that will be displayed in the select dropdown without scrolling.

Secondary text

Add secondary-text data attribute to the specific options to display secondary text.

Search

Set filter option to true to enable options filtering.

Option groups

It is possible to group options by using optgroup element.

Select with icons

Add icon data attribute to the specific options to display the option icon.

Validation

Set validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages.


                        (function () {
                          'use strict';

                          // Fetch all the forms we want to apply custom Bootstrap validation styles to
                          var forms = document.querySelectorAll('.needs-validation');

                          // Loop over them and prevent submission
                          Array.prototype.slice.call(forms).forEach(function (form) {
                            form.addEventListener('submit', function (event) {
                              event.preventDefault();
                              event.stopPropagation();

                              form.classList.add('was-validated');
                            },false);
                          });
                        })();

Set value

The setValue method allows to programatically set the component selections.

Single selection

Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.


                          const singleSelect = document.querySelector('#singleSelection');
                          const singleSelectInstance = mdb.Select.getInstance(singleSelect);
                          singleSelectInstance.setValue('4');

Multi selection

Add array of string values to the arguments list to correctly select option with corresponding value in multi selection mode.


                          const multiSelect = document.querySelector('#multiSelection');
                          const multiSelectInstance = mdb.Select.getInstance(multiSelect);
                          multiSelectInstance.setValue(['3', '4', '5']);

Select - API

Usage

Via class

Via JavaScript


                      var mySelect = new mdb.Select(document.getElementById('mySelect'), options)

Options

Name	Type	Default	Description
`clearButton`	Boolean	`false`	Adds clear button to the select input
`disabled`	Boolean	`false`	Changes select input state to disabled
`displayedLabels`	Number	`5`	The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off.
`filter`	Boolean	`false`	Displays filter input that allow to search for specific option
`filterDebounce`	Number	`300`	Adds delay to the options list updates when using filter input. Improves performance of the select with filter.
`invalidFeedback`	String	`Invalid`	The text which is displayed below the Material Select when the validate option is enabled and the select is invalid
`noResultsText`	String	`'No results found'`	The text that will be displayed when no option is found after using select filter
`placeholder`	String	`-`	The text that will be displayed as select input placeholder
`optionsSelectedLabel`	String	`'options selected'`	The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected
`optionHeight`	Number	`48`	Height of the select option. Used to determine dropdown height and number of visible options.
`selectAllLabel`	String	`'Select all'`	Changes label of select all option.
`validation`	Boolean	`false`	Adds required validation to the component.
`validFeedback`	String	`'Valid'`	The text which is displayed below the Material Select when the validate option is enabled and the select is valid.
`visibleOptions`	Number	`5`	The maximum number of options which are visible in the select dropdown without scrolling.

Methods

Name	Description	Example
`open`	Manually opens a select	`mySelect.open()`
`close`	Manually closes a select	`mySelect.close()`
`setValue`	Programatically set component selections. Add single value for default select and array of values for multiselect.	`mySelect.setValue('3')`
`dispose`	Disposes a select instance	`mySelect.dispose()`


                          var selectEl = document.getElementById('mySelect')
                          var select = new mdb.Datepicker(selectEl)
                          select.open()

Events

Name	Description
`open.mdb.select`	This event fires immediately when the select is opened.
`close.mdb.select`	This event fires immediately when the select is closed.
`valueChange.mdb.select`	This event fires immediately when the select value changes.
`optionSelect.mdb.select`	This event fires immediately when the select option is selected.
`optionDeselect.mdb.select`	This event fires immediately when the select option is deselected.


                          var mySelect = document.getElementById('mySelect')
                          mySelect.addEventListener('open.mdb.select', function (e) {
                            // do something...
                          })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


                      import { Select } from 'mdb-ui-kit';