Plan pick (controlled)
Title only
Uncontrolled default
With description (controlled)
Disabled option in group
Billing cycle
All disabled
Selection indicator
selectionIndicator — auto adjusts ring weight and tint per theme.
Animation variants
animationVariant — click each control to compare press feedback.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| name | Optional | string | — | Radio group name. |
| checked | Optional | boolean | — | Controlled selection — pair with onValueChange. |
| defaultChecked | Optional | boolean | — | Uncontrolled initial selection. |
| onValueChange | Optional | (value: string) => void | — | Called with this card's value when selected. |
| selectionIndicator | Optional | "auto" | "hairline" | "thin" | "medium" | "thick" | "ring" | "filled" | auto | Selected-state chrome — auto tunes ring/border contrast per theme; hairline through thick control weight; ring uses offset outline; filled uses strong tint. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation on the tile — default, none, ripple, scale, sink, lift, pulse, or glow. |