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.

<mwc-select label="Filled">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

<mwc-select outlined label="Outlined">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

mwc-select(label='Filled')
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

mwc-select(outlined, label='Outlined')
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

Preselected

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

<mwc-select label="Filled">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0" selected>Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

<mwc-select outlined label="Outlined">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0" selected>Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

mwc-select(label='Filled')
    mwc-list-item
    mwc-list-item(value='0', selected) Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

mwc-select(outlined, label='Outlined')
    mwc-list-item
    mwc-list-item(value='0', selected) Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') 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.

<mwc-select label="Fully Disabled" disabled>
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

<mwc-select outlined label="Fully Disabled" disabled>
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

<mwc-select label="Disabled Options">
    <mwc-list-item disabled selected></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3" disabled>
        <div>Item 3 (Disabled)</div>
    </mwc-list-item>
</mwc-select>

<mwc-select outlined label="Disabled Options">
    <mwc-list-item disabled selected></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3" disabled>
        <div>Item 3 (Disabled)</div>
    </mwc-list-item>
</mwc-select>

mwc-select(label='Fully Disabled', disabled)
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

mwc-select(outlined, label='Fully Disabled', disabled)
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

mwc-select(label='Disabled Options')
    mwc-list-item(disabled, selected)
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3', disabled)
        div Item 3 (Disabled)

mwc-select(outlined, label='Disabled Options')
    mwc-list-item(disabled, selected)
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3', disabled)
        div 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.

<mwc-select label="Icon Label" icon="event">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

<mwc-select outlined label="Icon Label" icon="event">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

mwc-select(label='Icon Label', icon='event')
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

mwc-select(outlined, label='Icon Label', icon='event')
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') 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.

<mwc-select class="w-100" label="Filled">
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

<mwc-select class="w-100" label="Outlined" outlined>
    <mwc-list-item></mwc-list-item>
    <mwc-list-item value="0">Item 0</mwc-list-item>
    <mwc-list-item value="1">Item 1</mwc-list-item>
    <mwc-list-item value="2">Item 2</mwc-list-item>
    <mwc-list-item value="3">Item 3</mwc-list-item>
</mwc-select>

mwc-select.w-100(label='Filled')
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') Item 3

mwc-select.w-100(label='Outlined', outlined)
    mwc-list-item
    mwc-list-item(value='0') Item 0
    mwc-list-item(value='1') Item 1
    mwc-list-item(value='2') Item 2
    mwc-list-item(value='3') 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.

<select class="form-select form-select-lg" aria-label="Large select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-sm" aria-label="Small select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

select.form-select.form-select-lg(aria-label='Large select example')
    option(selected) Open this select menu
    option(value='1') One
    option(value='2') Two
    option(value='3') Three

select.form-select(aria-label='Default select example')
    option(selected) Open this select menu
    option(value='1') One
    option(value='2') Two
    option(value='3') Three

select.form-select.form-select-sm(aria-label='Small select example')
    option(selected) Open this select menu
    option(value='1') One
    option(value='2') Two
    option(value='3') Three

Disabled

Use the disabled attribute to disable the entire select element, or individual options.

<select class="form-select" aria-label="Disabled select example" disabled>
    <option selected>This menu is fully disabled</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="form-select" aria-label="Default select options">
    <option selected disabled>This option is disabled</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" disabled>Three (Disabled)</option>
</select>

select.form-select(aria-label='Disabled select example', disabled)
    option(selected) This menu is fully disabled
    option(value='1') One
    option(value='2') Two
    option(value='3') Three

select.form-select(aria-label='Default select options')
    option(selected, disabled) This option is disabled
    option(value='1') One
    option(value='2') Two
    option(value='3', disabled) Three (Disabled)

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

<div class="form-floating">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>

.form-floating
    select#floatingSelect.form-select(aria-label='Floating label select example')
        option(selected) Open this select menu
        option(value='1') One
        option(value='2') Two
        option(value='3') Three
    label(for='floatingSelect') Works with selects

Material Select

Default

Preselected

Disabled

Icon

Full Width

Bootstrap Select

Default

Disabled

Floating Label

Related Links

Change the theme type!

Try a pre-built swatch!

Or choose your own colors...

Need ideas? Randomize!

Finished? Export your color palette file with install instructions!