> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas/5.3/canvas-library/blocks/single-select-or-multi-select-pill-tabs-group.md).

# Single-Select or Multi-Select Pill Tabs Group

## Overview

![Multi-select preview](/files/8YnDLjeH9TpLziNZzITi)

![Single-select preview](/files/wscama6wXN8N2YYZZGUD)

![Editor view](/files/MaUUFhWdFLZyaA7pVyrP)

This block includes the Multiselect Pills visual element from the Canvas UI elements plugin.&#x20;

## 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.&#x20;
* 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.&#x20;

## 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.&#x20;
* 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:

![](/files/4LySOyic0ykfSnAVyfof)

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

![](/files/NtPxcPzwooGWfmwtR6Wk)

* In the **CanvasMultiselectPills** plugin element's property editor, update the type of content and data source of the plugin element.&#x20;
* 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:

![](/files/0qlsCxy5DiKVzZ68EKOo)

{% 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.&#x20;
* 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.&#x20;
