Gallery

Design a dropdown menu component for selecting one value from a short list. Treat it as a compact control, not a navigation pattern. The closed state should show the current value, a clear label, and an affordance that indicates it expands.

When opened, the menu should present a vertically stacked list with enough spacing for pointer and keyboard use. Include hover, focus, selected, and disabled states. If one option is destructive or risky, style it differently so it reads before the user commits.

Define how the component behaves with mouse, touch, and keyboard. Users should be able to open it, move through options with arrows, select with Enter or click, and dismiss with Escape or by clicking outside. Keep the selected value visible after close.

Account for placement near the bottom of the viewport, long option labels, and menus that need to open upward. The component should feel stable in dense UIs and make the active choice obvious at every step.