# Single-Select or Multi-Select Pill Tabs Group

## Overview

![Multi-select preview](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCJS6zgKUXYE5cLx_J%2FScreen%20Shot%202021-08-03%20at%2011.40.52%20AM.png?alt=media\&token=a8726853-25de-45ee-84f1-6e4385b42e5e)

![Single-select preview](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MgCIhbSvG91cVm0a_eX%2F-MgCJZV7QbfW0b76ms3c%2FScreen%20Shot%202021-08-03%20at%2011.41.24%20AM.png?alt=media\&token=377fd25e-ef42-484e-9dbf-10aa0a64cd0b)

![Editor](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZtaxrO_vesmV72n4PF%2F-MZtgqizFCc57ryUKo1t%2Fimage.png?alt=media\&token=d4a0578d-0a53-4db9-97be-8a9035f533a6)

This block includes the Multiselect Pills visual element from the Canvas UI elements plugin. 

## Structure

* The **CanvasMultiselectPills** plugin element can display any list of Things in pill-shaped tabs. The pills are responsive in width and will adjust based on the display text of each pill. 
* By default, the pill style will utilize your app's primary colors. You can adjust the styling within the property editor of the visual element. 

## How to set up multi-select tabs

* In the **CanvasMultiselectPills** plugin element's property editor, update the type of content and data source of the plugin element. 
* If you are using this element to filter a repeating group, add a constraint to your repeating group, which utilizes the "Current selected" state of the plugin:

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZtaxrO_vesmV72n4PF%2F-MZtn0mnDqtbvswV51Qo%2Fimage.png?alt=media\&token=d317f848-5416-42c5-81a6-5dad19cbd9fa)

{% hint style="info" %}
You do not need to add any workflows for the multi-select functionality. The plugin element has multi-select functionality built into it.
{% endhint %}

## How to set up single-select tabs

* In the **CanvasMultiselectPills** plugin element's property editor, change the selection style from "Multiple Selection" to "Single Selection".

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZtaxrO_vesmV72n4PF%2F-MZto1jE34AxxDSW4AMP%2Fimage.png?alt=media\&token=0c513ee5-3e7f-4189-83ec-d754226f43cf)

* In the **CanvasMultiselectPills** plugin element's property editor, update the type of content and data source of the plugin element. 
* If you are using this element to filter a repeating group, add a constraint to your repeating group, which utilizes the "Current selected" state of the plugin:

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZtaxrO_vesmV72n4PF%2F-MZtn0mnDqtbvswV51Qo%2Fimage.png?alt=media\&token=d317f848-5416-42c5-81a6-5dad19cbd9fa)

{% hint style="info" %}
You do not need to add any workflows for the single-select functionality. The plugin element has single-select functionality built into it.
{% endhint %}

## Other customization options

* Change the alignment of the tabs from "left-justified" to "centered" or "right-justified" through the property editor's alignment dropdown. 
* Change the responsive behavior of the tabs from "wrap to the next line" to "scroll horizontally" or "scroll vertically" through the property editor's flow dropdown.