---
tags: DS DONE
---

> [name=Laureen Delhaye]DS OK

# Selectable boxes
Selected boxes allow the user to select options.

# Usage

When it comes to interact with an interface such as a configurator or a wizard, selected boxes are very handy to navigate through choices. They allow users to answer multiple choices questions as well as unique ones.

## Themes
Selected boxes exist for our different themes:

### Light and dark themes

The light version is the most used on Proximus products pages. The dark version is complementary to the light one and allows to differentiate sections, pages,... and to rythm the content.
If there are several questions/answers, and than several rows of selected boxes, it is important to choose a single theme for the set of questions/answers to ensure consistency for the flow.

### Epic and Pickx themes

This version can only be used for all the Epic environment and Pickx content.

## States


1. **Basic state**
State visible before click. Container, selection indicator & label are displayed.

2. **Focused state**
When user navigates with the keyboard, focus indicates which choice is hightlighted.


3. **Hover state**
State visible when the cursor hovers the box. Border of the container is displayed in another colour depending on the type of selected box. Cursor becomes a pointer.
When the box is selected, the selection indicator is displaying a check mark.

4. **Pressed state**
State visible only when the box is clicked. Border of the container in hover status color, selection indicator & label are displayed but the size of the full box is decreased at 99%.


5. **Selected state**
State visible after click. The option/choice is selected and the selection indicator is displaying a check mark.


6. **Disabled state**
State visible when no interraction is possible with the box. Border and label are displayed but they are greyed out and the check mark disappears in order to signify the change of state.

7. **Locked state**
State visible if the box is by default selected and cannot be unselected.
A helper text is added to inform why the box can't be deselected.

## Anatomy


1. **Instructions**
Instruction is a clear and concise message that helps the user make the right choice.

>[name=WARNING]
> Instructions good practises:
>* Indicates whether it's a simple or a multiple choice.
>* Inform the user of the choice(s) to be made.
>* Keep the information architecture of the page when writing the instructions (i.e.: if the parent is a level 2 heading, use a level 3).
>
> Please refer to [good copy](https://)

3. **Container**
Container is displayed around the text label with a solid color.

2. **Primary label**
Primary label is one of the most important element on a selected box, as it indicates the option/choice that will be selected/made when clicked. Try to be as concise as possible.

3. **Secondary label**
Secondary label provides complementary informations about the choice to make. It can be an explanatory phrase, a price, ... but not a list of elements.

> [name=ACCESSIBILITY] To keep this asset accessibile, it's not allowed to use block elements inside a selectable box like lists (ordered and unordered), headings, paragraphs, tables, promo patches,...

5. **Selection indicator**
Selection indicator is the other most important element on a selected box, as it indicates the status of the box (in this exemple selected for the first case and locked for the second case).

6. **Helper text** (optional)
Helper text gives additional guidance about the status of a selected box, such as why it could be locked or disabled. It should only take up a single line.

## Examples: a picture is worth a thousand words

*IMAGES*

## Composition

Composition of selected boxes is set to the grid. We can have maximum 4 columns per row in desktop:


And 2 columns maximum per row in mobile:


The height of the boxes is based on the highest box of the row.

---

# Style

> [name=INFO BOX] Please refer to the [sizes](https://) and [colors](https://) default values.

## **Sizes**


| | Mobile | Tablet/Desktop |
|------------------------------------------ | ------- | ------------------------------------------ |
| 1. Container paddings | 1 rem |2 rem |
| 2. Container border | 0.2 rem |
| 3. Border radius | 0.5 rem |
| 4. Selection indicator size | 3 rem |
| 5. Selection indicator icon | Size 4 |
| 6. Selection indicator marging right | 1 rem | 2 rem |
| 7. Helper text font size | Size 3 |

## **Colors**

### Light theme


| Status | Attribute | Container | Selection indicator | Label(s) |
| ----------- | -------------------------------------------------- | ----------------------------------- | ------------------------------------------ | -------------------------------------------- |
| 1. Basic | Background<br> Border<br>Text/Icon | White <br> Grey 4 <br>- | White <br> Primary dark 7 <br>- | -<br>-<br>Primary purple |
| 2. Hover | Background<br> Border<br>Text/Icon | White <br> Purple 7 <br>- | White <br> Primary dark </br>- | -<br>-<br>Primary purple |
| 3. Pressed | Background<br> Border<br>Text/Icon | White <br> Purple 7 </br> - | White <br> Primary dark </br>- | -<br>-<br>Primary purple |
| 4. Selected | Background<br> Border<br>Text/Icon | White <br> Success </br>- |Success <br>Success <br> White </br> | -<br>-<br> Primary purple |
| 5. Disabled | Background<br> Border<br>Text/Icon | Transparent <br> Grey 4 <br>- </br> | - <br> - <br> - | -<br>-<br>Disabled |
| 6. Locked | Background<br> Border<br>Label/Icon<br>Helper text | White <br> Success </br>-<br>- | Success <br> Success <br> White<br>- </br> | -<br>-<br> Primary purple <br> Success </br> |

### Dark theme


| Status | Attribute | Container | Selection indicator | Label(s) |
| --------------------------- | --------------------------- | ---------------------------------------------- | ----------------------------------------------- | ----------- |
| 1. Basic | Background<br> Border<br>Text/Icon | Dark purple<br> Dark purple <br>- | White <br> Primary dark 7 </br>- | -<br>-<br>White |
| 2. Hover | Background<br> Border<br>Text/Icon | Dark purple<br> Purple 3 <br>-</br> | White <br> Primary dark </br>- | -<br>-<br>White |
| 3. Pressed | Background<br> Border<br>Text/Icon | Dark purple <br> Purple 3 </br>- | White <br> Primary dark </br>- | -<br>-<br>White |
| 4. Selected | Background<br> Border<br>Text/Icon | Dark purple<br> Success <br>- | Success<br> Success <br> White | -<br>-<br>White |
| 5. Disabled | Background<br> Border<br>Text/Icon | Transparent <br> Primary purple 8 </br>- | no selection indicator | -<br>-<br> Disabled |
| 6. Locked | Background<br> Border<br>Text/Icon | Dark purple<br> Success <br>- </br> | Success<br> Success <br> White </br> | -<br>-<br>White |

### Epic and Pickx content


| Status | Attribute | Container | Selection indicator | Label(s) |
| --------------------------- | --------------------------- | ---------------------------------------------- | ----------------------------------------------- | ----------- |
| 1. Basic | Background<br> Border<br>Text/Icon | Primary dark 9<br> Primary dark 9 <br>- | White <br> Primary dark 7 </br>- | -<br>-<br>White |
| 2. Hover | Background<br> Border<br>Text/Icon | Primary dark 9<br> Purple 3 <br>-</br> | White <br> Primary dark </br>- | -<br>-<br>White |
| 3. Pressed | Background<br> Border<br>Text/Icon | Primary dark 9 <br> Purple 3 </br>- | White <br> Primary dark </br>- | -<br>-<br>White |
| 4. Selected | Background<br> Border<br>Text/Icon | Primary dark 9<br> Success <br>- | Success<br> Success <br> White | -<br>-<br>White |
| 5. Disabled | Background<br> Border<br>Text/Icon | Transparent <br> Primary dark 9 </br>- | no selection indicator | -<br>-<br> Disabled |
| 6. Locked | Background<br> Border<br>Text/Icon | Primary dark 9<br> Success <br>- </br> | Success<br> Success <br> White </br> | -<br>-<br>White |