Configure options

Simplify user choices in configuring their settings.

Overview

Configuring settings can significantly affect user operations, whether options are turned on or off. Clear design simplifies decision-making and minimizes confusion. We employ various design elements such as checkboxes and activable panels to ensure the process is clear and user-friendly.

Checkbox

exemple of how a checkbox is used to activate an option

• Usage: Employ a simple checkbox to enable users to opt into a simple feature. Checkboxes are suitable for straightforward options and can be displayed individually or grouped with others that are semantically related to streamline the user interface.

• Implementation: Since checkboxes are form elements, a save bar is required to commit any changes made.

Activable Panels

An Activable Panel can show or hide parts of a form depending on whether a setting is turned on or off. It does not save any changes by itself.

Exemple of the use of an Activable Panel

• Benefits: Using these panels helps keep your form neat and easy to understand. It reduces the need for many checkboxes and makes the form less confusing.

• Important Note: When you activate a panel, it might show a lot of new information. Make sure that this information is necessary and does not overwhelm the user.

• Activable Panel or Switch inside the panel ?

  • If activating a setting shows or hides the entire panel, use the Activable Panel.

  • If different elements in the panel are shown or hiden separately, use one or several switch within the panel to control these changes.

Exemple of using several switches in a panel

Radio group card

exemple of a use of Checkbox Group Card to configure options

• Usage: Use a Radio Group Card when users need to choose between two or three options, each with its own related settings.

• Functionality: This component lets users easily switch between different options. It keeps the user interface tidy and makes it clear when moving from one option to another.

• Important Note: Use this component in a column layout, not in a row.