Gallery
See what others have created
idealisticdaybed
@idealisticdaybed
Select
Design a select component for a form. Show the closed field, the opened menu, and the selected state. The trigger should include a label, current value, and a clear indicator that it expands. The menu should support a short list of options, one active option, and a visible selected option.
Include the states a user will actually hit: default, hover, focus, disabled, and error. If the label or option text is long, the layout should still hold up without breaking alignment or hiding the current value. Keep the control readable at a glance and easy to scan once opened.
If you choose to adapt the pattern for mobile, show how the interaction changes there: full-width sheet, native picker, or another clear pattern. The result should feel like a real form control, not a decorative dropdown.
What to deliver
- Design a closed select field with label, current value, and disclosure affordance.
- Design the opened menu with 5–8 options and a clear active state.
- Include disabled, error, and helper text variants.
- Show keyboard focus and hover states for the trigger and options.
- Add a mobile-friendly version if the control changes behavior on small screens.
For an engaging interaction, consider animating the select element's transitions. Subtle movements can guide the user's attention and enhance the experience.