Vuance UI Kit

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.

Reviewers are notified once the pull request opens

v-modelundefined

Playground

The full prop surface with copy-ready markup that follows what you change.

Interactive preview

Changes are reflected in the example and source.

Reviewers are notified once the pull request opens

v-modelundefined

Properties

Variant

Label

Density

Multiple

Clearable

Mandatory

State

Row slot

Vue

<m-dropdown
  v-model="reviewer"
  :items="members"
  item-value="id"
  label="Reviewer"
  clearable
/>

Tokens

What the dropdown owns is the chrome between the field and the rows: the arrow, the panel box, the keyboard highlight and the empty state. The box comes from the field, the row from the list.

MDropdown · All40 tokens
md-dropdown

MDropdown API

Props, slots and events extracted from the shipped component.

MDropdown

Input family
src/runtime/components/ui/dropdown

Props

NameTypeDefault
disabledPrevents interaction and applies the disabled visual state.
booleanfalse
loadingReplaces content with progress feedback and prevents interaction.
booleanfalse
readonly
booleanfalse
variant
Extract<MTextFieldVariant, 'filled' | 'outlined'>'filled'
rounded
'sharp' | 'small' | 'medium' | 'large' | 'pill''small'
labelPlacement
'top' | 'float' | 'inset' | 'hidden''float'
path
stringundefined
name
stringundefined
label
stringundefined
placeholder
stringundefined
helperText
stringundefined
error
booleanfalse
errorMessage
stringundefined
required
booleanfalse
autofocus
booleanfalse
autocomplete
stringundefined
density
'compact' | 'default' | 'comfortable''default' as MFieldDensity
itemsOptions. Every item carries its own `id`; that id is its identity.
readonly DropdownItemBase[]() => []
itemTitleRow text. Key or getter; defaults to the item's `label`.
DropdownRuntimeResolver<string>'label'
itemValueValue written to the model. Key or getter; defaults to the whole item.
DropdownRuntimeResolver<unknown>undefined
itemDisabledPer-item disabled guard. Key or getter; defaults to the item's `disabled`.
DropdownRuntimeResolver<boolean>'disabled'
valueComparatorValue equality. Defaults to comparing two objects by `id` and everything else by `===` — a refetched list is a new set of object references, and identity is the one thing an item is required to declare.
(left: never, right: never) => booleanundefined
multipleSelect more than one value; the model becomes an array.
booleanfalse
mandatoryKeep at least one value selected (the last one cannot be removed).
booleanfalse
maxUpper bound on the selection. `multiple` only — a single-select field cannot hold two values, so a limit there has nothing to limit.
numberundefined
clearableShow a control that empties the selection.
booleanfalse
menuPlacementWhere the panel opens relative to the field.
'top left' | 'top right' | 'bottom left' | 'bottom right' | 'center' | 'top' | 'bottom''top left'
maxHeightCap on the scrolling area of the panel. A number is read as `rem` (the kit's 1rem = 1px-of-the-mockup convention), a string is passed through. Defaults to the panel's own token so the list of a hundred options does not run off the screen. This is live geometry supplied at runtime, so it travels as a custom property — the one case the zero-runtime rule allows.
number | stringundefined

Slots

Events

MDropdown does not emit component-specific events. Native events fall through to its root element.