# Single-Select or Multi-Select Pill Tabs Group

## Overview

![Multi-select preview](https://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FOJkAKzmqmCHVpdETzMZU%2Fpills1.png?alt=media\&token=a563ab2b-1f05-40f9-9638-c58355d94e6d)

![Single-select preview](https://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2F6xzEAJW45TxhPR1rqKoE%2Fpills2.png?alt=media\&token=6c7ac147-2cc9-467a-b8f5-ad29df521f43)

![Editor view](https://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FghC9hJstAomKEXOwdeSG%2Fpills3.png?alt=media\&token=befa50df-7bba-4c06-9b7f-8faebe8d1309)

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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FNE9p0mEAJND4c070rObq%2Fpills4.png?alt=media\&token=5dc201ff-6252-4dea-850a-9018b1b212b5)

{% 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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FOPY09ShgOjwFcutwVr0j%2Fpills5.png?alt=media\&token=372b6b06-cfc8-4baa-9bc3-4b84ddc059f8)

* 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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FiOTe8RG1fkdFWgF486HO%2Fpills6.png?alt=media\&token=dfc3ba9c-3523-473c-a031-f13b0b39df05)

{% 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.