Dynamic Standalone Sample Mount | AP Component Library

Radio Group — Basic

Controlled with `value` and `onValueChange`. Uses labels for larger tap targets.

Selected plan: pro

BasicStarter toolkit • ₹0 • Free foreverProAdvanced features • ₹999/mo TeamCollaboration suite • ₹1,999/mo

Pro tip: wrap each `RadioGroupItem` with a clickable label to improve accessibility.

Controlled

All images use `ap-icon.svg` via `next/Image`.

Radio Group — Card Style

Show radio items as rich “cards” with price and ETA.

Standard

3–5 days

₹0

Express

1–2 days

₹299

Same-day

Today

₹599

Current: exp

Shipping detailsCard UI

Radio Group — With Help Text

Inline layout, helper copy, and a small media preview in each option.

Accent Colour *Used for buttons and links

EmeraldRoseSlate

You can preview styles next to each choice. This stays light/dark-mode compatible.

Selected: emerald

Inline

Radio Group — States

Show disabled items and an example of invalid styling.

T-shirt size

xssmmd

XS is unavailable (disabled). Others remain selectable.

Confirmation

YesNo

Type your initials

Please enter your initials to confirm.

Mark containers with `data-[invalid]` and inputs with `aria-invalid` to indicate errors.

Links use `next/Link`. For more patterns see docs.

States