Choice

Usage

Put beta-choice on a div. The button opens a list of options with the chosen one marked. Arrow keys move through the options, Home and End jump, Enter selects, Escape and an outside click close it and return focus to the button. The menu opens upward when there is no room below.

Choosing a value writes it to a hidden input and fires a change event, so a surrounding form can save straight away. This page pins one menu open for comparison; the live behaviour runs in the Portal.

name, value string

The form field name and the chosen option’s value. A value with no option shows the placeholder.

button-id, label-id string

The button’s id and the id of the element that names the choice.

data-analytics intent

The base intent. The button sends it with open and each option with select.

Source Components/Beta/Choice/