Overview

Key Features

• List Variants: Includes simple and complex list styles.
• Composable with partials: Custom lists can be created using the menu item and divider.
• Customizable with slots: List items can be replaced with custom layouts.
• Accessibility: Fully keyboard and screen-reader accessible.

Anatomy

1. Field label (optional): Provides context for the input, guiding users on what to enter.
2. Input prompt : Gives users a hint about what to select or enter before any options are chosen. It expands to fill its container up to a maximum width of 480 px; for wider layouts, enable the fluid prop.
3. Description text (optional): Additional guidance or instructions related to the input, such as how to select multiple options.
4. Chevron icon button: Expands or collapses the dropdown list, allowing users to view and choose from available options.

List Variants

The field dropdown component comes with built-in variants, offering both simple and complex list options by default to suit different use cases

• Simple List: Use for straightforward dropdowns with a flat list of options.
• Complex List: Use when each option contains additional information or actions (e.g., icons, descriptions).

Composable with partials

Two partial components are available: the menu item and the menu divider. The menu item has a simple variant, with only a label, and a complex variant, with leading icon, item label, sub-header icon, and shortcut text. These components can be used to build a custom menu within your Figma file.

Customizable with Slots

How to:

1. Create a local component in your project, composed with the <Dropdown item> and <Dropdown separator> partial components.
2. Replace the slot in the dropdown with your local component

Looks and Feel

The dropdown list item supports the following states:

• Default: When inactive and not interacted with.
• Hover: When the dropdown is focused via keyboard or mouse.
• Disabled: When the dropdown is unavailable for interaction.
• Error: When validation fails, an optional error message is displayed.

Best Practice

Do:

• Use dropdowns for short, manageable lists of related options.
• Use clear, predictable labels that reflect domain-specific language users already understand.
• Use radio buttons instead of a dropdown when there are only 2–3 choices.
• Consider button groups for binary or simple choices

Don’t:

• Don’t use a dropdown if there are fewer than three options.

Links

The latest UI designs are in the Figma file, while the components are available in Storybook — a visual workspace where UI elements can be viewed and interacted with like a live demo, while being coded, tested, and documented in isolation. Supported stacks include Web Component, Blazor, Angular, React, and VueJS, linked below.

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.