All Patterns

Pricing Toggle

Pricing Toggle – Configuration Guide

This pattern uses data attributes to switch content when the billing toggle is clicked. No code editing required.

How It Works

The toggle switches the data-billing attribute between "annual" and "monthly". Elements with matching data attributes automatically update their text content.

Configurable Elements

1. Section (Default State)

Select the Pricing Toggle Section element → Cmd+K

Attribute Values Description
data-billing annual or monthly Which prices show on page load
2. Price Elements

Select any price (e.g., “$10/mth”) → Cmd+K

Attribute Example Description
data-annual $10/mth Shown when Annual is selected
data-monthly $15/mth Shown when Monthly is selected
3. Billing Text Elements

Select “Billed annually.” text → Cmd+K

Attribute Example Description
data-annual Billed annually. Shown when Annual is selected
data-monthly Billed monthly. Shown when Monthly is selected

Step-by-Step: Change a Price

  1. Click the price element in the card (e.g., “$10/mth”)
  2. Press Cmd+K to open the Attributes panel
  3. Edit data-annual to your annual price (e.g., $99/yr)
  4. Edit data-monthly to your monthly price (e.g., $12/mth)
  5. Update the visible text to match your default state

Adding Toggle to Other Elements

Any text element can toggle by adding both data attributes:

data-annual="Save 20%"
data-monthly="Pay as you go"

The script will automatically swap the text when the toggle is clicked.

Notes

  • The visible text content should match whichever state is set as default (data-billing on section)
  • Toggle supports keyboard (Enter/Space) for accessibility
  • Script is embedded in the pattern – no external dependencies

Changelog

  • January 20, 2026: Test changelog entry