Form Select
Form selects display a set of choices on a temporary, togglable surface.
Material Select
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.
Default
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.
Preselected
When using the select web component, use the
selected
attribute to preselect one of the list items.
Disabled
Use the
disabled
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
div
tag, demonstrated below.
Icon
Adding an icon to the select is very simple using the web component. Simply use the
icon='{name}'
attribute, where
name
is the name of any Material Icon included with this toolkit.
Full Width
By using the
.w-100
utility class, the select web component can extend to the full width of it's parent element.
Bootstrap Select
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.
Default
By default, the restyled Bootstrap select type has three sizing options available.
Disabled
Use the
disabled
attribute to disable the entire select element, or individual options.
Floating Label
Bootstrap's floating label style is also supported with form selects, and has been restyled to fit a Material Design look and feel.
Related Links
Docs for Material's select web component
Bootstrap's select input documentation