Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Select Box

The Select Box component allows users to make selections from a predetermined list of options.

Selectbox
  • Overview
  • Specs
  • Guidelines

Component

A Select Box component, in UX, provides users with a predefined list of options from which they can make a single selection or multiple selection.

It typically appears as a drop-down menu, conserving screen space while offering users a clear and intuitive interface for making selections. Select Boxes are commonly used for presenting choices, such as country selection, category filtering…

Select Boxes can enhance usability by reducing cognitive load and ensuring consistent input, ultimately improving the overall user experience.

Selectbox_Anatomy
Select Box anatomy

A: Single Selection Variation

B: Multi Selection Variation

1: Label

2: Icon

3: Closable Chip

4: List Item

5: Hint Chip

SingleSelection
Single Selection variation

Used for:

Limited choice selection

When users need to make a selection from a predefined list of options, a Select Box provides a clear and efficient interface for choosing among the available alternatives;

Standardized input

By presenting options in a uniform and consistent format, Select Boxes promote standardized input, reducing the likelihood of user input errors and ensuring data integrity;

Ease of use

Select Boxes offer a familiar and intuitive interface for users, particularly those who are used to drop-down menus, making them easy to understand and interact with across different applications and platforms;

Compatibility

Select Boxes are well-suited for mobile devices, as they can be easily adapted to touch-based interactions and small screen sizes.

Don’t use for:

Large number of options

When presenting a large number of options, such as hundreds or thousands, a select box may become unwieldy and difficult for users to navigate effectively;

Inconsistency

If the use of Select Boxes deviates significantly from established design patterns or user expectations within the context of the application or platform, it may result in inconsistency;

Simple input expected

If the expected value is a simple text, which doesn’t require to choose from a list, consider using a simple text-field.

MultiSelection
Multi Selection variation

Demo

Access the Figma file and inspect the element using Dev Mode.

demo_Selectbox
Selectbox at Figma
Open Figma

Last Update

Before
Old version of Selectbox
Current version of Selectbox
  • Updated color of items in different states;
  • Updated items list;

Related

Checkbox

A checkbox is an essential UI element that allows users to make binary choices …
Read More
Chips

Chips

Chips are small visual elements commonly used in user interfaces to represent discrete pieces …
Read More

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …
Read More

States

Select Box
Select Box

Single Selection

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  input: var(--grey-8);
  icon: var(--grey-7);
  list-item: var(--grey-7);
  scrollbar: var(--grey-6);
  divider: var(--grey-5);
  chips: var(--chips_hint);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  input: var(--grey-8);
  icon_open_in_new: var(--theme-100);
  icon: var(--grey-6);
}
Disabled 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  input: var(--grey-6);
  icon_open_in_new: var(--theme-100);
  icon: var(--grey-6);
}
Error 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  input: var(--grey-6);
  icon: var(--grey-6);
}

Multiple Selection

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  input: var(--grey-8);
  icon: var(--grey-7);
  list-item-checkbox: var(--checkbox-enabled);
  list-item: var(--grey-7);
  scrollbar: var(--grey-6);
  divider: var(--grey-5);
  chips: var(--chips_hint);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  chip-background: var(--grey-4);
  chip-label: var(--grey-8);
  icon_open_in_new: var(--theme-100);
  icon: var(--grey-6);
}
Disabled 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  chip-background: var(--grey-4);
  chip-label: var(--grey-8);
  icon_open_in_new: var(--theme-100);
  icon: var(--grey-6);
}
Error 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  input: var(--grey-6);
  icon: var(--grey-6);
}

Size

Small 
.small {
  label: var(--label-small);
  input-height: 28px;
  input-border: var(--x-small-radius);
  input-gap: 4px;
  input-padding: var(0, --spacing-8);
  icon: 16px;
  placeholder: var(--label-small);
}
Regular 
.regular {
  label: var(--label-regular);
  input-height: 36px;
  input-border: var(--x-small-radius);
  input-gap: 8px;
  input-padding: var(0, --spacing-8);
  icon: 20px;
  placeholder: var(--label-regular);
}
Large 
.large {
  label: var(--label-large);
  input-height: 40px;
  input-border: var(--x-small-radius);
  input-gap: 8px;
  input-padding: var(0, --spacing-8);
  icon: 24px;
  placeholder: var(--label-large);
}

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component
polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Single Selection

This is the default Select Box. It only allows one selection from your list. When you click or enter, the drop-down is collapsed.

SingleSelection
Single Selection variation

Multiple Selection

When you need to select more than one option, you can use the multi selection Select Box.

A checkbox is added to make the selection which will then be converted into tags. There is also an option to select everything in the list.

MultipleSelection
Multiple Selection variation

Additional Information

The Select Box is designed to display up to three levels of information.

By default, only one item of information is displayed. The configuration of which information appears and in what position is made according to each context, taking into account the established hierarchy.

Additional Information
Additional Information in a Select Box

Dos & Dont’s

Do

Use a Select Box for a minimum of three options;

Don’t

Use different list variations in the same drop-down;

Case Studies

Building a new Seamless User Experience

Using a design system is like having a set of building blocks for creating digital products. It ensures everything looks …
Read More

Discover the exciting features

Compose Design brings a host of thrilling and transformative new features designed to enhance your experience. Dive into our latest …
Read More

Benefits of a Design System

A design system is a collection of reusable components and guidelines that ensure consistency and efficiency in building digital products …
Read More

References

Outline