# Advanced selection

<figure><img src="/files/ALa013AozxxjFCDQsnWQ" alt=""><figcaption></figcaption></figure>

## Overview

There are 2 types of selection patterns at Mirakl. Either the selection is simple with one parameter, in which case we use a [Select picker](/design/components/form/pickers.md#90df62) and a dropdown menu. But in other cases, users need more time or information to make a clear choice. That's when the advanced selection pattern comes in handy.

### When to use

* When the list of selectable items is long
* When the user needs more context to make an informed decision
* When a visual restitution of the selection is needed, and when that restitution must be actionable and editable

### When to not use

* [When the list of selectable items is less than 10 options](#user-content-fn-1)[^1]

## Guidelines

Several components can trigger an advanced picker modal:

<details>

<summary>Inline advanced picker</summary>

<img src="/files/fOURCFjaGvvxwWqqjHkX" alt="" data-size="original">

</details>

<details>

<summary>Button (In a toolbar, in a form...)</summary>

<img src="/files/Jfhm4SAQL44I82DmEQWQ" alt="" data-size="original">

</details>

<details>

<summary>Link button with counter</summary>

<img src="/files/jTabcjW4SnGL68KvtW2x" alt="" data-size="original">

</details>

<details>

<summary>Yes per [item]</summary>

<img src="/files/drAIgeOv3wlx4yuJgIHr" alt="" data-size="original">

</details>

### Advanced picker modal

<figure><img src="/files/7HiyI2QrN2IfxIxnLlhU" alt="An image of an advanced picker modal"><figcaption></figcaption></figure>

1. **Header**: always a sorted column by default
2. **Toolbar**: 3 filters maximum, search bar for filtering data, density management
3. **Bulk**: only used to mass select items, no action is triggered by bulk selection
4. **Pagination**: load more only

### Data restitution

The component you'll use to trigger the advanced picker modal will depend on the data restitution you want on your page.

| Trigger                                                          | Data restitution                                                                         |
| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| Inline advanced picker                                           | Inline advanced picker with item list                                                    |
| [Button](/design/components/actions/buttons.md)                  | [Datalist](/design/components/datalist.md), [Datatable](/design/components/datatable.md) |
| [Link Button](/design/components/actions/buttons.md#link-button) | [Datalist](/design/components/datalist.md), [Datatable](/design/components/datatable.md) |

[^1]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design.mirakl.com/design/patterns/advanced-selection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.