# Configure options

**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**

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FEvtyeTNrTBOOxg8bxAQR%2FCapture%20d%E2%80%99e%CC%81cran%202024-05-02%20a%CC%80%2016.53.21.png?alt=media&#x26;token=1b1bc227-a4f6-4d22-b7ea-fb6af0aab8f4" alt="" width="375"><figcaption><p>exemple of how a checkbox is used to activate an option</p></figcaption></figure>

* **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](https://design.mirakl.com/design/components/structure/panel/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.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FB5JnaRdUEyjuJ1Amj7oG%2Foptions.png?alt=media&#x26;token=277b7b5d-4eef-4016-9fc4-dcc7898c5b39" alt=""><figcaption><p>Exemple of the use of an Activable Panel</p></figcaption></figure>

* **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 ?**&#x20;
  * 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.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F20ePXwxtwdZeq0C7C49L%2FCapture%20d%E2%80%99e%CC%81cran%202024-05-03%20a%CC%80%2011.21.29.png?alt=media&#x26;token=d07eb6be-72cc-4f6e-858a-ed5eea7e0760" alt="" width="563"><figcaption><p>Exemple of using several switches in a panel</p></figcaption></figure>

## Radio group card

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FIOUMIhaHyeIpSa5smzlv%2Fcheckbox%20group.png?alt=media&#x26;token=43c41b4b-9f95-48b5-b7d3-ceb20b6d55db" alt=""><figcaption><p>exemple of a use of Checkbox Group Card to configure options</p></figcaption></figure>

* **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.