Form selects display a set of choices on a temporary, togglable surface.
The select web component from the Material Web Components Catalog has a true Material Design styling. By using the Material Web Component instead of Bootstrap's default select type, the functionality and user experience, especially on mobile, is drastically extended and improved.
By default, the select web component can be used in the filled or outlined style, and can have a form label, and multiple list items. In the demo below, one of the list items is blank.
When using the select web component, use the
attribute to preselect one of the list items.
attribute on either the entire select or any of the list items to disable the ability to interact with that element.
Note that when disabling an individual list item, the content of the item needs to be wrapped in a
tag, demonstrated below.
Adding an icon to the select is very simple using the web component. Simply use the
is the name of any Material Icon included with this toolkit.
By using the
utility class, the select web component can extend to the full width of it's parent element.
Bootstrap selects have had their styling modified to match Material Design's specifications as closely as possible while retaining their compatability with other Bootstrap form elements and buttons.
By default, the restyled Bootstrap select type has three sizing options available.
attribute to disable the entire select element, or individual options.
Bootstrap's floating label style is also supported with form selects, and has been restyled to fit a Material Design look and feel.
Docs for Material's select web component
Bootstrap's select input documentation