Minimum and maximum size

Minimum and maximum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts.

Consistent sizing

All select boxes should be the same size as one another. Keep metadata concise, and make the size of the box large enough to accommodate longer text when translated to other languages.

Text overflow

When the title of the select box is too long for the available horizontal space, it wraps to another line. Wrapped text should not affect the size of an individual select box. Each box in a group should have enough space to allow for longer, localized text to fit as necessary.

Selection

Clicking a select box does not immediately move to the next step in the sequence. After making a selection, the user must initiate the next step by choosing a button or similar component outside the select box group.

Keyboard focus

A select box group can be navigated using a keyboard. The keyboard focus state takes the button's visual hover state and adds a blue ring to the button in focus.