material-select

MD3 single-select — textfield + chevron trigger that opens a popover-anchored material-menu of material-option children. Form-associated; type-ahead on open and inline (closed); optional clear button.

Basic — leading icons + groups

Click the field or the chevron to open. Arrow keys / Home / End navigate; Enter commits; Esc / click-away closes. Type a letter while open to jump.

United States Canada Brazil Germany France United Kingdom Ukraine (coming soon) Japan South Korea

Pre-filled + clearable + filled variant

Initial value="medium". Clearable — an x button appears next to the chevron once a value is set.

Small Medium Large XL

Two-line items — supporting text + trailing icon

Personal Work Alias

Disabled / error

Small Medium Large Option A Option B Option C

Form round-trip

The selected option's value is what gets posted. Reset restores the attribute default.

Developer Designer Product manager Operations US East US West EU Central AP South
(submit to serialize)

Long list — scrolls inside the popover

Type letters while open or closed to jump (closed = native <select> parity, fires valueChange). Repeat the same first letter with a pause between presses (e.g. "s", pause, "s", pause, "s") to cycle through Saudi Arabia → Singapore → Slovakia → South Africa → South Korea → Spain → Sweden → Switzerland. Space mid-word (e.g. type "new" then Space then "z" for "New Zealand") stays in the buffer instead of opening/closing. Home/End while closed opens the menu focused on the first/last option; ArrowUp opens focused on the current selection (or the last option, if nothing is selected yet).

Programmatic selection — option.selected

Setting an option's selected property directly (not just writing select.value) updates the field's value/display too — a request-selection channel from the option up to the select. The buttons below flip option.selected on individual material-option elements; watch the field and the "Last valueChange" log update without ever touching .value.

Apple Banana Cherry

Multi-select — chips inside the field

multiple branches the trigger to a chip shell that grows as chips wrap. Menu items show a checkbox glyph; click toggles selection and keeps the menu open. Close with Esc, click-away, or the chevron.

Frontend Backend Design DevOps Data Mobile Security

Multi — recipients (filled, pre-filled, growing)

Filled variant. Pre-loaded with two values; add more to see the field grow. Backspace on the focused field removes the last chip.

ada@example.com alan@example.com grace@example.com linus@example.com margaret@example.com dennis@example.com brian@example.com

Multi — required + form post (Django getlist parity)

FormData contains one entry per selected value, just like a native <select multiple> — submit and check the echo below.

Read Write Admin Delete
(submit to serialize)

Last valueChange

(none)
Sample usage 
<material-select name="country" label="Country" required>
  <material-optgroup label="Europe">
    <material-option value="de" supporting-text="Deutschland">Germany</material-option>
    <material-option value="fr">France</material-option>
  </material-optgroup>
  <material-option value="us" leading-icon="flag">United States</material-option>
</material-select>

<script>
  document.querySelector('material-select')
    .addEventListener('valueChange', e => console.log(e.detail.value));
</script>