Select

Pick one value from a short list.

Analytics Engineering Data Platform Snowflake

<mm-select name="owner" label="Owner team" placeholder="Choose a team">
  <mm-option value="analytics-engineering">Analytics Engineering</mm-option>
  <mm-option value="data-platform">Data Platform</mm-option>
  <mm-option value="snowflake"><mm-provider-logo slot="logo" provider="snowflake" decorative></mm-provider-logo>Snowflake</mm-option>
</mm-select>

Guidance

Selects pick one value from a known, short list: a provider, an owner team, a sort order. The field is a select-only combobox (a 36px surface box with the control border) that opens a raised listbox; the selected option is drawn in mm-selected with a check. Use mm-combobox when people need to type to find the value, and mm-segmented-control for two to four modes.

Keyboard follows the WAI-ARIA select-only combobox pattern (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/): Enter, Space, Down and Up open the list; arrows, Home, End, Page Up and Page Down move; typing jumps to a matching option; Enter or Space selects; Escape closes; Tab selects and moves on.

Properties

Property	Attribute	Type	Default	Description
value	value	string	''	The selected value.
hideLabel	hide-label	boolean	false	Visually hide the label (it is still announced).

Events

Event	Detail	Description
mm-change	CustomEvent<{ value: string }>	The selected value changed by user action.
mm-input	CustomEvent<{ value: string }>	Fired with mm-change, for parity with text inputs.
change		Native-style change event, for bind:value-style code.

Slots

Slot	Description
Default	mm-option and mm-option-group elements.

CSS parts

Part	Description
control	The combobox box.
popup	The floating panel.
listbox	The listbox.
help	The help line.
error	The error line.

Examples

Every state of mm-select in Storybook, with keyboard and screen reader tests.