Design

Research and rationale

The design of the select field is intended to match the text-inputs. This way forms benefit from the same research and maintain aesthetic consistency with other form fields. The component itself is also build on the HTML select element and has limited styling, the visual appearance of the list items is determined by the browser.

Iconography

Like the original DTA style we chose to remove the default browser styles for select-boxes and use a background image for the icon so we could maintain design consistency across browsers. We used the same chevron icon that we have established as our indicator of an interactive field in other components such as the accordion, mega menu and open and close buttons.

Styling the list box

One of the main features to consider when designing a select box is how the list of items appear when the user clicks on the component. There's a lot to consider here and we could either take the approach of designing a custom list box or using the browsers default appearance. The pros and cons as outlined in the article ‘Striking a balance between native and custom select elements’ (Pereira, 2020) are outline below.

Native select elements

• Pros: Native selects are accessible, well-supported across browsers and devices, and come with built-in keyboard and screen reader support. They are also easy to implement and maintain
• Cons: They have limited styling capabilities, and the appearance of native selects can vary between browsers and operating systems, making it challenging to achieve a consistent look

Custom select elements

• Pros: Custom selects offer greater flexibility in styling and functionality, allowing designers to create consistent, visually appealing interfaces across browsers and devices. They can also include additional features not available in native selects, such as search functionality, image support, or multi-selection
• Cons: Building a custom select element can be time-consuming and may require more effort to maintain accessibility and cross-browser compatibility. It may also increase the size of the project's codebase and negatively impact performance

For the time being we have chosen to use the native select list box component as they offer better accessibility out of the box, with built-in keyboard navigation, screen reader support, and focus management. This was also reinforced by a study completed by Higley (2019) which found the native <select> element had the most understandable and usable experience across every platform for single selection. This was the same approach taken by IBM Carbon (Select), the original DTA (Now Gold) Design System and UK.GOV (Select) Design System.

More research and a review will be done when we move into the implementation and design of combo boxes, editable combo boxes and multi-select boxes.