# PricingOption

> One choice of plan, to pick among a few.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { PricingOption, PricingOptionGroup } from "@rrios-forge/ui/molecules/pricing-option";`
- **Source**: `packages/ui/src/molecules/pricing-option`

Selectable plan / price option. Standalone, the consumer wires `selected`; inside a `PricingOptionGroup` each option takes a `value` and the card itself is the radio. `prominence="featured"` is the 'recommended' mark (a lift and a badge), visually distinct from the user's selection (an accent ring and a check).

## Use it for

- Pricing plan → `PlanCard` or `PricingOption`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `selected` | — | `true` `false` | `false` | Chosen in a set: the selected wash plus a non-colour cue (weight, check). |
| `prominence` | — | `default` `featured` | `default` | How a surface stands among its siblings. |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |
| `interactive` | — | `true` `false` | `false` | Responds to the pointer: hover and press feedback, a pointer cursor. |

## Stories

- [Playground](/?path=/story/components-molecules-pricingoption--playground) · frame: `/iframe.html?id=components-molecules-pricingoption--playground&viewMode=story`
- [Selected](/?path=/story/components-molecules-pricingoption--selected) · frame: `/iframe.html?id=components-molecules-pricingoption--selected&viewMode=story`
- [Highlighted](/?path=/story/components-molecules-pricingoption--highlighted) · frame: `/iframe.html?id=components-molecules-pricingoption--highlighted&viewMode=story`
- [Disabled](/?path=/story/components-molecules-pricingoption--disabled) · frame: `/iframe.html?id=components-molecules-pricingoption--disabled&viewMode=story`
- [Pricing set](/?path=/story/components-molecules-pricingoption--pricing-set) · frame: `/iframe.html?id=components-molecules-pricingoption--pricing-set&viewMode=story`
- [Radio group](/?path=/story/components-molecules-pricingoption--radio-group) · frame: `/iframe.html?id=components-molecules-pricingoption--radio-group&viewMode=story`

## Decisions that name it

- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-006 — Geometry and typography signature
- ADR-028 — The label is not the fill
- ADR-030 — Axis vocabulary: one name, one meaning

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).