Select menu

The select menu is a button that shows a setting and its current value. Selecting it opens a menu with the options. It belongs to the controls family: the same rounded, tinted look, made for operating a device rather than filling in a form.

You find it in two places:

• In the more-info dialogs, below the main control, for the secondary settings of a device. Like the preset, direction, and oscillation of a fan, or the fan and swing mode of a thermostat. Several of them sit next to each other in a row, each 120 to 160 pixels wide.
• In the features of the tile card, as the dropdown style of a mode feature. There it spans the full width of the card.

Use a select menu for:

• A setting of a device with more options than fit in a row
• A setting people change less often

Don't use a select menu for:

• A handful of options that people switch between all the time. Use a control select, which shows all options at once, see controls.
• Forms and settings. Use a regular select instead.
• A list of actions. Use a dropdown.

1. Container: the rounded button with a tinted background
2. Icon: the icon of the selected option, or a default icon for the setting
3. Label: the name of the setting, in small text
4. Value: the label of the selected option, below the label
5. Arrow: optional, a dropdown arrow at the end
6. Menu: the list of options that opens below the button, each with its own icon. The selected option is highlighted.

The default. The label names the setting, the value below it shows the current choice.

When there is no value, the label is shown on its own, at the size of the value.

In a tile card, the select menu hides its label and shows an arrow. The card already says what the feature is about, so only the value is shown, with an arrow at the end that says it opens a menu. The height follows the feature, 42 pixels.

• Hover: the tint of the background changes to a darker neutral color.
• Focus: keyboard focus shows a 2px ring around the button, in the secondary text color.
• Open: selecting the button opens the menu below it. The menu is at least as wide as the button.
• Selected: in the menu, the selected option is shown in medium weight and the primary color, on a light primary background.
• Disabled: the button shows its text in the disabled color, and does not open. The more-info dialogs disable it while the entity is unavailable.

Selecting an option does not change the value on its own. The page sets the new value, usually after the entity has changed.

Long labels and values are cut off with an ellipsis. The icon at the start shows the icon of the selected option when it has one. Otherwise it shows a default icon for the setting.

• Only hide the label where the surroundings already name the setting, like the tile card does.

The button opens a dropdown, and the menu follows its keyboard behavior:

Keyboard focus shows a 2px ring around the button, in the secondary text color.

The button is 48px high. Its width is set by the page, 120 to 160 pixels in the more-info dialogs.

The button is announced with its label and value, and as a button that opens a menu. Without the label, only the value is announced. The options are announced as menu items. The selected option looks selected, but is not announced as selected.

• The button is a native <button>, with aria-haspopup="menu" and aria-expanded set by the dropdown.
• The accessible name is the text inside the button: the label and the value. With hide-label, the label is not rendered at all, so screen readers only get the value.
• SVG icons are hidden from screen readers.
• The menu has the role menu, and each option has the role menuitem. The selected option is only marked visually.

• Controls: the family the select menu belongs to
• Dropdown: the menu it opens
• Tile card: where it shows up as a feature

The element is <ha-control-select-menu>. The menu is an ha-dropdown, opened below the button, and at least as wide as the button.

html`<ha-control-select-menu
  .label=${"Preset"}
  .value=${this.stateObj.attributes.preset_mode}
  .options=${[
    { value: "eco", label: "Eco" },
    { value: "sleep", label: "Sleep" },
  ]}
  @wa-select=${this._presetChanged}
>
  <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
</ha-control-select-menu>`

The component does not change its own value when an option is selected. It fires wa-select, and you set value from there, usually after the entity has changed. That is also why the demos on this page keep their value.

• label: the name of the setting.
• value: the value of the selected option.
• hide-label: shows only the value, without the label.
• show-arrow: shows a dropdown arrow at the end.
• disabled: disables the select menu. It does not open.

These can only be set as properties:

• options: an array of options. Each has a value and a label, and optionally an icon: iconPath for SVG path data, or icon for an icon name like mdi:fan.
• renderIcon: a function that returns the icon for a value. Used for options without iconPath or icon, in the menu and on the button.

• icon: the icon on the button, when the selected option has no icon of its own.

• wa-select: an option was selected. detail.item.value is its value.

• --control-select-menu-height: defaults to 48px.
• --control-select-menu-padding: defaults to 6px 10px.
• --control-select-menu-border-radius: defaults to var(--ha-border-radius-lg).
• --control-select-menu-background-color: defaults to var(--disabled-color).
• --control-select-menu-background-opacity: defaults to 0.2.
• --control-select-menu-focus-color: the focus ring. Defaults to var(--secondary-text-color).
• --mdc-icon-size: the icon size. Defaults to 20px.

The element is inline-block, and as wide as its content. Set a width, or display: block to fill the container, like the tile card features do.

Source: src/components/ha-control-select-menu.ts