Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA pricing plan picker built on native radio buttons, with a monthly and yearly toggle that updates every price.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PlanOption[] | - | Plans to offer. |
value | string | - | Controlled selected plan id. |
defaultValue | string | highlighted or first plan | Initial plan id when uncontrolled. |
onValueChange | (id: string) => void | - | Called with the plan id when one is chosen. |
billing | "monthly" | "yearly" | - | Controlled billing period. |
defaultBilling | "monthly" | "yearly" | "yearly" | Initial billing period. |
onBillingChange | (billing: "monthly" | "yearly") => void | - | Called when the billing period changes. |
name | string | generated | Radio group name, so the value submits with a form. |
currency | string | "USD" | ISO 4217 currency code. |
locale | string | "en-US" | Locale for money. |
legend | string | "Choose a plan" | Visually hidden legend for the group. |
Also accepts all <fieldset> props.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique id. This is the selected value. |
name | string | - | Plan name. |
description | string | - | Who the plan is for. |
price | { monthly: number; yearly: number } | - | Monthly price, and the monthly price when billed yearly. 0 shows "Free". |
features | string[] | - | What is included. |
highlight | string | - | Ribbon text, for example "Most popular". |
priceNote | string | - | Text after the price, for example "per user". |
disabled | boolean | - | Prevent choosing this plan. |