# subscription-swatches

> Webflow tabs and radios that choose a selling plan.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/subscription-swatches  
Updated: 2026-10-13

## At a glance

| Case | What the picker does |
|---|---|
| A group with several plans | the tab shows the group's name (`subscription-group="name"`), the pane one Radio button per plan; the tab and pane get the class `more-options`, and elements with `group-condition="more-options"` on or inside them show |
| A group with one plan | the tab shows the plan's name instead of the group's, and a click on it chooses the plan; the tab and pane get the class `one-option`, and elements with `group-condition="one-option"` on or inside them show |
| A product sold only by subscription | the one-time tab and its pane are removed; the picker starts on the first plan |
| No plan for the selected variant | `subscription-swatches` is removed when the product or the selected variant has no plan; a group without a plan for the selected variant is dropped |

More in [the guide](https://www.smootify.io/docs/features/subscriptions).

## Where it can go

- **Inside** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product).
- **Must contain** `.w-tabs`, `.w-tab-link`, `.w-tab-pane`.
- **Out of place,** Smootify removes it from the page: also when the product has no selling plans.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `auto-select-plan`, `auto-select-index`, `data-selected-group`, `data-selected-option-index`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Selling plans](https://www.smootify.io/docs/reference/attributes/selling-plan) | `subscription-group` | 1 |
| [Loading](https://www.smootify.io/docs/reference/attributes/loading) | `skeleton` | 5 |
| [Subscription choices (condition)](https://www.smootify.io/docs/reference/conditions/subscription-group) | `group-condition` | 2 |

## Loading

Its code loads only on pages that have `subscription-swatches`.