Selection field

Dropdown

Single or multiple selection in a field you can read at rest — chips, a limit, and a panel you may replace entirely.

Four scenarios worth trying

Each one is a real component on this page. Open them, break them, watch the read-outs.

Single selection

The default: one value, panel closes on pick.

Vue

<m-dropdown
  v-model="stage"
  :items="stages"
  item-value="id"
  label="Stage"
  variant="outlined"
  clearable
/>

Multiple with a ceiling

Chips in the field, and rows that step aside once the limit is reached.

Vue

<m-dropdown
  v-model="labels"
  :items="tags"
  item-value="id"
  :max="3"
  multiple
  clearable
  label="Labels"
/>

A value before its options

The list arrives a second late; the preset value is still there when it does.

Vue

<m-dropdown
  v-model="country"
  :items="countries"
  item-value="id"
  :loading="pending"
  label="Country"
/>

Your panel, our behaviour

The #default slot replaces the list entirely — group headers, sticky sections, a virtual scroller — while the keyboard and ARIA stay put.

Vue

<m-dropdown v-model="city" :items="cities" item-value="id" label="Destination">
  <template #default="{ entries, listboxAttrs, getOptionAttrs, activeId, panelStyle }">
    <div v-bind="listboxAttrs" :style="panelStyle">
      <div
        v-for="entry in entries"
        :key="entry.key"
        v-bind="getOptionAttrs(entry)"
        :data-active="entry.id === activeId || undefined"
      >
        {{ entry.title }}
      </div>
    </div>
  </template>
</m-dropdown>

What the component decides for you

Four rules that are not props. They are the reason the field behaves the same in every app that uses it.

A value with no matching item still shows

It renders from a fallback row built out of the value itself, and the model is left alone. Dropping it would quietly rewrite the form.

Keyboard order is data order

Rows are walked in the order of items, so inserting one in the middle of a live list cannot send the arrows somewhere else.

A blocked row is not a disabled item

max blocks the rows you have not chosen; the selected ones stay reachable, because removing one is the only move left.

Validation binds the selection

Bind path and the adapter receives the value, not the text drawn in the box.

Reach for something else when…

A dropdown hides its options behind a click. That is the right trade only sometimes.

Two or three options, always visible

Segmented buttons or radios show every choice at once and cost one interaction less.

A list nobody can read

Past a screenful, the useful control is a query, not a scroll. Use the autocomplete.

A value that is not in the list

A dropdown never invents an option. If the user must be able to add one, that is a combobox, not this.

A short, closed set of values

Statuses, countries, reviewers, labels — the case this component exists for.