Go back

Dropdown

Dropdowns allow users to select one option from a list, making them essential for forms, navigation, and filtering interfaces. They help conserve space while providing access to multiple choices in a structured way.

Go back

Dropdown

A well-designed dropdown ensures clarity, ease of use, and accessibility, allowing users to navigate options efficiently across different devices.

When to use

✅ Single-selection menus
✅ Compact UI needs
✅ Filters & settings
✅ Forms

When not to use

⛔️ For binary choices
⛔️ For frequently selected actions
⛔️ For very long lists

Dropdown types & behavior

Dropdowns come in different styles depending on the use case:

Dropdown type	Behavior
Standard dropdown	A simple list of options that opens on click.
Searchable dropdown	Allows users to filter options by typing.
Grouped dropdown	Categorizes options within sections.
Multi-select dropdown	Enables users to select multiple options at once.
Icon-based dropdown	Used for quick actions (e.g., more options menu ⋮).

Best practices for usability

Use clear labels – The selected item should always be visible inside the dropdown.
Ensure a large touch target – Dropdowns should have at least 44x44px tap area for touchscreens.
Provide sensible defaults – If applicable, pre-select the most commonly chosen option.
Avoid deep nesting – Multi-level dropdowns can be difficult to navigate, especially on mobile.

<label for="country">Select your country:</label>
<select id="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="de">Germany</option>
</select>

<label for="country">Select your country:</label>
<select id="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="de">Germany</option>
</select>

<label for="country">Select your country:</label>
<select id="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="de">Germany</option>
</select>

Accessibility considerations

Keyboard Navigation – Users should be able to open dropdowns using Spacebar or Enter, and navigate with Arrow keys.
ARIA Support – Use aria-expanded="true/false" and aria-labelledby for screen readers.
Focus Management – Ensure the focus moves correctly between the dropdown and selected option.
Sufficient Contrast – Ensure readable text and visible focus outlines.

<select id="country" aria-labelledby="country-label">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="de">Germany</option>
</select>

<select id="country" aria-labelledby="country-label">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="de">Germany</option>
</select>

<select id="country" aria-labelledby="country-label">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="de">Germany</option>
</select>

Continue reading

Checkbox

Link

Checkbox

Link

Looking to contribute?

Your input matters! Whether it’s feedback, design suggestions, or new ideas, every contribution helps shape a more refined, flexible, and efficient design system. Share your thoughts and be part of building something better for everyone.

Share feedback