# Single-Select or Multi-Select Pill Tabs Group

## Overview

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

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

![Editor view](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FUToMNGryWGZkiCqRLtxY%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://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Fh6gnoGzbzgnE1F2CUG28%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://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FnKPt9QtRpR6vyjU1mbud%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://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Fx7BqUmyYsjWClxoEi7Dh%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.