Bootstrap Select

Posted on  by admin

Bootstrap Textarea

Bootstrap supports the following form controls:. Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Note: Inputs will NOT be fully styled if their type is not properly declared! The following example contains two input elements; one of type text and one of type password:.

.

Select with markup usageMDB Pro component

Try it Yourself ». The following example contains a textarea:.

. Try it Yourself ». Checkboxes are used if you want the user to select any number of options from a list of preset options.

Select with iconsMDB Pro component

The following example contains three checkboxes. The last option is disabled:.

.

Try it Yourself ». Use the .checkbox-inline class if you want the checkboxes to appear on the same line:.

.

Try it Yourself ». Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

The following example contains three radio buttons.

The first option is checked by default and the last option is disabled:.

.

Try it Yourself ». Use the .radio-inline class if you want the radio buttons to appear on the same line:.

Color variationsMDB Pro component

Bootstrap Select List

.

Try it Yourself ». Select lists are used if you want to allow the user to pick from multiple options.

The following example contains a dropdown list (select list):.

.

Try it Yourself ». Note: This documentation is for an older version of Bootstrap (v.4).

A newer version is available for Bootstrap 5.

We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.Go to docs v.5.

Default styling for Bootstrap Select component.

Material Design styling for Bootstrap Select component.

You can bind options data from object and have full control of select component, or you can use select with markup based on HTML.

Bootstrap Radio Buttons

React Bootstrap Select

Bootstrap Checkboxes

Supported Form Controls

This solution offers a little bit less control over the component - it won't respond on outer options changes (f.e.

deletion, sorting or keyboard control). In order to change a select color use property color.

Bootstrap Input

Disabled select optionMDB Pro component

Preselected optionsMDB Pro component

Use property checked on an MDBSelectOption element to preselect it while component renders. Separate groups of options using disabled option.

Basic example

Beautify your select and use icons inside option components. By adding a disabled attribute to the particular option, you can make it unselectable.

Option groupsMDB Pro component

Setting property multiple allows to select the list of options. For complex options, check Multiselect documentation.

Select with search boxMDB Pro component

Note: Select All option is available only within Select with Object based options.

Example

Select MultipleMDB Pro component

There is a plenty of options to customize the Material Select. All of them are described below. Important thing to note is that data attributes have higher priority than JS options passed to the .materialSelect() call. It means that if you will have data-placeholder="Please select a country" and JS option { placeholder: 'Choose country' }, then the value of data-placeholder will be displayed as it has higher priority. The exception is the id attribute which has higher priority than data-select-id as described below.

Data attributeOption nameTypeDefaultDescription
-destroybooleanfalseIf set to true destroys the Material Select wrapper
data-secondary-textsecondaryTextstringfalseAdditional text displayed inside an option
data-validatevalidatebooleanfalseIf set to true the select control will be validated when put into form element
data-select-idselectIdstringnullIf provided, this ID will be used instead of a random UUID to make Material Select elements unique. Note: if id attribute is provided, it has the highest priority
data-default-material-inputdefaultMaterialInputbooleanfalseIf set to true the select control will look like default Bootstrap select
data-fas-classesfasClassesstringemptySpace-separated list of FAS classes to add on the element in the options list. Note: works only if data-fas attribute is provided with chosen FAS class value
data-far-classesfarClassesstringemptySpace-separated list of FAR classes to add on the element in the options list. Note: works only if data-far attribute is provided with chosen FAR class value
data-fab-classesfabClassesstringemptySpace-separated list of FAB classes to add on the element in the options list. Note: works only if data-fab attribute is provided with chosen FAB class value
data-copy-classes-optioncopyClassesOptionbooleanfalseIf set to true all classes added to the native
data-label-select-alllabels.selectAllstringSelect allThe text which is displayed as option which selects all other options in the Multiselect
data-label-options-selectedlabels.optionsSelectedstringoptions selectedThe text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected
data-label-valid-feedbacklabels.validFeedbackstringOkThe text which is displayed below the Material Select when the validate option is enabled and the select is valid
data-label-invalid-feedbacklabels.invalidFeedbackstringIncorrect valueThe text which is displayed below the Material Select when the validate option is enabled and the select is invalid
data-label-no-search-resultslabels.noSearchResultsstringNo resultsThe text which is displayed in the Searchable Select when there are no results
data-label-keyboard-active-classkeyboardActiveClassstringheavy-rain-gradientThe class which is added to the options selected by the arrow keys (using keyboard)
data-placeholderplaceholderstringnullThe placeholder text which is displayed on the select if no value selected yet
data-visible-optionsvisibleOptionsnumber5The maximum number of options which are visible in the Material Select dropdown without scrolling. If set to -1, the limit is off
data-max-selected-optionsmaxSelectedOptionsnumber5The 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