Dropdown

A Dropdown is a UI component that allows users to select an option from a list.

Base Components

Overview

A Dropdown is a UI component that allows users to select an option from a list, conserving space by hiding the list until the dropdown menu is clicked.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8atCSov6KVkMchm0ZT8zeZ%2FShipfaster-UI---v2.7-(LIVE)%3Fnode-id%3D5158-756%26t%3DIsUbgF59vjRUP8zU-1

When should you use them?

Use dropdowns to conserve space when there are multiple options to choose from, such as in forms or navigation menus.

How should you use them?

  • Clearly label the dropdown and its options.
  • Ensure the dropdown is easy to open and close.
  • Provide a default option or placeholder text.
  • Make sure the dropdown is accessible, with keyboard navigation and screen reader support.
  • Avoid using dropdowns for very long lists, which can be difficult to navigate.
Previous

No previous post
Up next

No next post