Select Box

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 or multiple selection.

It usually 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 to display options, such selecting countries, filtering categories, etc..

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

A: Single selection variation
B: Multi selection variation
1: Label
2: Icon
3: Closable chip
4: List item
5: Hint chip

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.

Currency choice

For accounting software that deals with multiple currencies, a select box is invaluable for choosing the currency in which a transaction is recorded. The dropdown might include options like USD, EUR, or GBP, enabling the user to quickly and accurately select the relevant currency.

Tax rates choice

When creating an invoice or entering purchase transactions, the select box is useful for choosing the appropriate tax rate, such as 5%, 10%, or 20%. Since tax rates are predefined by tax authorities, providing these options in a dropdown helps ensure that the correct rate is applied to transactions.

Payment method

When recording payments, a select box can be employed to choose the payment method. Common options like “Bank Transfer,” “Credit Card,” or “Cash” can be provided, allowing the user to quickly select the appropriate payment method for each transaction.

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.

Date values expected

If the data entered needs to follow a very specific format (such as dates, phone numbers, or tax ID numbers), a select box may not ensure compliance with the required structure. For instance, when entering a date, it is more efficient to use a date picker rather than a select box.

Numeric values expected

Select boxes are not suitable for continuous or numeric data that covers a wide range. For instance, if a user is entering quantities, percentages, or dollar amounts, it’s impractical to provide a dropdown with every possible value.

Multi Select variation misapplied for price amount field

Demo

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

Selectbox at Figma — Select Box at Figma

Open Figma

Last Update

16/07/2024

Current version of Select Box

Updated color of items in different states;
Updated items list;

Checkbox

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

Label

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

Single Selection

Enabled

.enabled {
  label: var(--grey-7);
  input-border: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-7);
  icon: var(--grey-7);
}

Hover

.hover {
  label: var(--grey-7);
  input-border: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-7);
  icon: var(--grey-7);
}

Focus

.focus {
  label: var(--grey-7);
  input-border: 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-border: var(--grey-1);
  input-background: var(--grey-3);
  input: var(--grey-7);
  icon: var(--grey-6);
}

Disabled

.disabled {
  label: var(--grey-7);
  input-border: var(--grey-4);
  input-background: var(--grey-2);
  input: var(--grey-6);
  icon: var(--grey-6);
}

Error

.error {
  label: var(--grey-7);
  input-border: var(--error-100);
  input-background: var(--grey-1);
  input: var(--grey-7);
  icon: var(--grey-6);
}

Multiple Selection

Enabled

.enabled {
  label: var(--grey-7);
  input-border: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-7);
  icon: var(--grey-7);
}

Hover

.hover {
  label: var(--grey-7);
  input-border: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-7);
  icon: var(--grey-7);
}

Focus

.focus {
  label: var(--grey-7);
  input-border: 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);
  divider: var(--grey-5);
  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-border: var(--grey-1);
  input-background: var(--grey-3);
  input: var(--grey-7);
  chip-background: var(--grey-4);
  chip-label: var(--grey-8);
  icon: var(--grey-6);
}

Disabled

.disabled {
  label: var(--grey-7);
  input-border: var(--grey-4);
  input-background: var(--grey-2);
  icon: var(--grey-6);
}

Error

.readOnly {
  label: var(--grey-7);
  input-border: var(--error-100);
  input-background: var(--grey-1);
  input: var(--grey-7);
  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

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

Figma Component

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

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.

Multiple Selection

General Guidelines

When the Select Results option is available, this option must be fixed at the top of the drop-down. The scroll behavior will occur within the records of the Select Box.

Scroll behavior in the Multi Select variation.

When the total number of chips exceeds the space dedicated to the field, a “+ Number of additional options” is displayed. Clicking on the number displays a drop-down menu with the additional options selected.

Additional Selected Options — Additional options selected.

Select Results Behavior

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.

In addition, a Select Results option is always fixed at the top of the options list. This allows users to quickly select or deselect all available options with a single click, making the selection process much more efficient, especially when dealing with large datasets.

The placement of the Select Results option at the top ensures that it is easily accessible and visible, simplifying the user experience by reducing the need to check each option individually. This feature is designed to save time and improve the overall interaction with the Select Box component, particularly in scenarios where multiple selections are common.

Furthermore, when a search is made, the label will remain the same, since the Select Results option can be used in both contexts, without the need to change the label.

Select Results behavior in the multiple selection variation.

Alternatives

If the Select Results option of the multi selection doesn’t suit your use case, an alternative without the Select Results option is available for specific cases, such as the use of different frameworks.

One aspect to take into account is that at least five different records must be displayed, and in some cases more may be displayed.

Use a Select Box for a minimum of three options.

Don’t

Use different list variations in the same drop-down.

Additional Information

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

By default, only one piece of information is displayed. The information that appears and in which position is configured according to each context, taking into account the established hierarchy.

Alongside with this information, an Adornment can be added to the left side of the level one information. This Adornment can take the form of the following components: