Dropdown

UI Components

This component can be used in forms for user input or in navigation menus to make selections from a given list. Size, shape, and style can be customized.

Introduction

The Dropdown component is a versatile tool in the GoodBarber design system. It can be used in a variety of contexts, such as in forms for user input, or in navigation menus for making selections. The component is highly customizable, providing a user-friendly and visually appealing way to present and select options.

Anatomy

Common design principles

Like Textfield, the Dropdown component comes in 3 sizes (Small, Medium, Large) and 2 types (Title UP and Title IN), however, some design principles are common to all these variations :

Title UPTitle IN

Inactive state
Dropdown inactive state in Title-Up and Title-In layout

Dropdown inactive state in Title-Up and Title-In layout

Focus state
Dropdown focus state in Title-Up and Title-In layout

Dropdown focus state in Title-Up and Title-In layout

Complete state
Dropdown complete state in Title-Up and Title-In layout

Dropdown complete state in Title-Up and Title-In layout

Component height

All field heights in a row are described in the Text Field section ( Title UPTitle IN). The Dropdown component uses these field heights for the state Disabled / Inactive / Complete / Error.

For the Focus and Focuserror states, the height of the base field is used for the list items:

Title UP

Dropdown height in Title-Up layout

Dropdown height in Title-Up layout

Title IN

Dropdown height in Title-In layout

Dropdown height in Title-In layout

Font Size

The Font size changes depending on the devices and the choice of the component size. You can have an overview of all used sizes at the bottom of the Text Field section.

Component SizeText LevelMobileTabletWeb
SmallBody 1141516
Small Body 1111212
MediumBody 1161719
Small Body 1121313
LargeBody 1192122
Small Body 1131414

Properties

Shape

Below, the Shape atom applied with the types Sharp / Rounded / Round for the states Disabled, Inactive, Complete and Error:

Shape on Dropdown

Shape on Dropdown

For Focus and Focus Error states in Round, we go from a radius of 50% of the component height to 12px.

Shape on Dropdown according states

Shape on Dropdown according states

⚠️ Round Shape Specificities

Border

By default, the Border Atom value is 1px for all states except Focus.

Disabled / Inactive / Complete / ErrorFocus / Focus Error

Border on dropdown according state

Border on dropdown according state

Shadow

The Shadow level changes for the Focus and Focus Errorstates: in fact, we go to the higher level to accentuate the elevation and thus highlight the activated component.

⚠️ Please note that the Inner Shadow option is not available for Focus and Focus Error.

Disabled / Inactive / Complete / ErrorFocus / Focus Error

Drop shadow level 1&2 on dropdown

Drop shadow level 1&2 on dropdown

Drop shadow according dropdown state

Drop shadow according dropdown state

Mix Inner & Drop shadow according dropdown state

Mix Inner & Drop shadow according dropdown state

Mix levels of Inner & Drop shadow according dropdown state

Mix levels of Inner & Drop shadow according dropdown state

Layout

Overlapping

As we’ve just seen, the Border and Shadow properties change with the Focus state. This allows the active component to be highlighted, especially when the elements overlap as below:

BorderShadow

Dropdown in form view

Dropdown in form view

Overflow

When the text of the component is larger than the allocated space, ellipses are used.
Dropdown width

Dropdown width

Behavior

Dropdown behavior

Dropdown behavior

States (Complete path)

Title UPTitle IN

Disabled
Dropdown Disabled state

Dropdown Disabled state

Inactive
Dropdown Inactive state

Dropdown Inactive state

Focus
Dropdown Focus state

Dropdown Focus state

Hover
Dropdown Hover state

Dropdown Hover state

Complete
Dropdown Complete state

Dropdown Complete state

Error
Dropdown Error state

Dropdown Error state

Error Focus
Dropdown Error Focus state

Dropdown Error Focus state

States (Pre-selection)

Title UPTitle IN

Inactive
Pre-selection in Inactive state

Pre-selection in Inactive state

Focus
Pre-selection in Focus state

Pre-selection in Focus state

Complete
Pre-selection in Complete state

Pre-selection in Complete state