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 UP	Title 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 UP Title 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

Title IN

Dropdown height in Title-In layout

Properties

Shape

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

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

⚠️　Round Shape Specificities

Border

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

Disabled / Inactive / Complete / Error	Focus / Focus Error
↓	↓

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 / Error	Focus / Focus Error
↓	↓

Drop shadow level 1&2 on dropdown

Drop shadow according dropdown state

Mix 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: