Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA plan selector where each option shows its price and a key feature, a Monthly or Yearly switch changes every price at once and shows the saving, and the chosen plan is summarised under the control. Use this when people pick a subscription inside a form or dialog.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in upgrade dialogs and settings, where a full pricing page is too heavy and people still need price and one differentiating feature to choose.
Do not use it when plans need a feature comparison. Link to the pricing table.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| ----------------- | ------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- | ------------------------ |
| plans | { id, name, monthly, yearly, highlight, disabledReason? }[] | - | monthly is the monthly price; yearly is the price per month when billed yearly. |
| value | string | - | The plan id (controlled). |
| defaultValue | string | - | Initial plan. |
| onValueChange | (id: string) => void | - | Runs when a plan is chosen. |
| billing | "monthly" \\ | "yearly" | - | The period (controlled). |
| defaultBilling | "monthly" \\ | "yearly" | yearly | Initial period. |
| onBillingChange | (billing) => void | - | Runs when the period changes. |
| currency | string | USD | ISO currency for Intl.NumberFormat. |
ToggleGroup named Billing period; the saving is written out (Save 20% with yearly billing).Pro, $12 per month billed yearly, unlimited projects.disabledReason is aria-disabled and shows the reason in text.Pro: $15 per month, billed monthly after a change.The pattern ships with a Testing Library test (plan-select-with-price.test.tsx) that covers prices by period, the saving text, choosing a plan and a disabled plan.