# Advanced selection

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FqYdIWsZlUlNYuDFv966d%2FAdvanced%20Selection%20Hero.png?alt=media&#x26;token=cd2ca148-3eca-4cd8-a693-1e14a645aed1" 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](https://design.mirakl.com/components/form/pickers#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="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FjNVs4RJPU13weCRs1BQT%2FInlined%20advanced%20picker.png?alt=media&#x26;token=e662a550-01e6-4c71-a45e-2c76c86c72d0" alt="" data-size="original">

</details>

<details>

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

<img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FZTCBwK1MG8c34Q00squh%2FButton%20Toolbar.png?alt=media&#x26;token=954d0f75-4810-4e30-8f11-d84bd2236910" alt="" data-size="original">

</details>

<details>

<summary>Link button with counter</summary>

<img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F3RfTAQqVEdWByEjQbUVc%2FLink%20Button.png?alt=media&#x26;token=b8955367-0acd-4979-a5c3-06fb963b4dac" alt="" data-size="original">

</details>

<details>

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

<img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FQ5cGFUoLgDPI0kO5RWpl%2FYes%20per.png?alt=media&#x26;token=e2bdf35b-ba67-4bbb-a0e3-dbd89c2ef0a1" alt="" data-size="original">

</details>

### Advanced picker modal

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FW9z57grvIwwVEfmdSgwE%2FAdvanced%20Selection%20Zoning.png?alt=media&#x26;token=cc1c2363-218a-4065-99dd-5a7435b3a2ae" 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](https://design.mirakl.com/design/components/actions/buttons)           | [Datalist](https://design.mirakl.com/design/components/datalist), [Datatable](https://design.mirakl.com/design/components/datatable) |
| [Link Button](https://design.mirakl.com/components/actions/buttons#link-button) | [Datalist](https://design.mirakl.com/design/components/datalist), [Datatable](https://design.mirakl.com/design/components/datatable) |

[^1]: