# 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.

Item 0 Item 1 Item 2 Item 3
Item 0 Item 1 Item 2 Item 3

### Preselected

When using the select web component, use the `selected` attribute to preselect one of the list items.

Item 0 Item 1 Item 2 Item 3
Item 0 Item 1 Item 2 Item 3

### 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.

Item 0 Item 1 Item 2 Item 3
Item 0 Item 1 Item 2 Item 3
Item 0 Item 1 Item 2
Item 3 (Disabled)
Item 0 Item 1 Item 2
Item 3 (Disabled)

### 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.

Item 0 Item 1 Item 2 Item 3
Item 0 Item 1 Item 2 Item 3

### Full Width

By using the `.w-100` utility class, the select web component can extend to the full width of it's parent element.

Item 0 Item 1 Item 2 Item 3
Item 0 Item 1 Item 2 Item 3

## 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.

Works with selects

### Related Links

Material Select Web Component Documentation

Docs for Material's select web component

Related Link arrow_upward
Bootstrap Select Documentation

Bootstrap's select input documentation

Related Link arrow_upward