List Field

A list field allows users to select one or multiple options from a predefined list.

Base Components

Overview

A list field is a form element that allows users to select one or multiple options from a predefined list, appearing as a dropdown menu, multi-select box, or list of checkboxes.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D124-40958%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use list fields when users need to select from a predefined set of options, such as selecting a country, choosing multiple interests, or picking a category.

How should you use them?

  • Clearly label the list field and its options.
  • Provide a default option or placeholder text.
  • Ensure the list is scrollable if it contains many options.
  • Allow for multiple selections if necessary and provide clear affordances.
  • Make sure the list field is accessible, with proper ARIA roles and keyboard navigation.
Previous

No previous post
Up next

No next post