Overview

Key Features

• Native List Support: Works with native list elements.
• List Variants: Includes simple and complex list styles.
• Field Labels: Includes label, description text, and required indicator.
• Composable with Partials: Custom lists can be built using reusable components.
• Customizable with Slots: List items can be replaced with local components.
• Accessibility: Fully keyboard and screen-reader accessible.

Anatomy

1. Field label (optional): Provides context for the selection, guiding users on what to choose.
2. Input prompt: Hints at what to select 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): Offers additional guidance, such as how to select multiple options.
4. Chevron icon button: Expands or collapses the list, allowing users to browse and select options.

List Variants

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

Look and Feel

States

States define how the component behaves and appears in different interactions:

• Default: The standard appearance when inactive
• Hover: Highlights the field when the user hovers over it
• Focus: Indicates active input with a visible focus indicator.
• Disabled: Prevents interaction and input, appearing visually subdued.
• Read-only: Displays content without allowing edits while maintaining a standard appearance.

Errors

Errors communicate invalid input through clear visual cues to help users correct mistakes. We use a red border around the input field, an error icon to indicate the issue, and an error message displayed below the field to provide further guidance.

1. Required field indicator: An asterisk (*) indicating that the field is mandatory and must be completed.
2. Error description text: Offers guidance on errors, such as formatting issues or missing input.
3. Error icon & field outline: A warning icon and red outline draw users attention to the error in the field.

Best Practice

Do:

• Use a native field select for short, simple option sets where quick selection is more important than visual richness.

Don’t:

• Overload native lists with more than ~10–15 options without grouping, as this reduces discoverability.
• Use a native list when visual customization is essential (e.g., icons, tooltips, tags), since rendering is OS-controlled.

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.