Billing Cycle Choice - Everyday Interface Patterns

A static monthly and annual billing cycle choice shows one selected plan, a visible renewal summary, and no billing API.

Program

Cycle choices should make the selected plan and renewal summary easy to read before anything changes. This lesson is a static choice state.

billing_cycle_choice.html

Visuals: captured from real browser rendering

<section class="billing-cycle" aria-labelledby="cycle-title">
  <h2 id="cycle-title">Billing cycle</h2>
  <fieldset>
    <legend>Choose a cycle</legend>
    <label><input type="radio" name="cycle" value="monthly"> Monthly, $12.00</label>
    <label><input type="radio" name="cycle" value="annual" checked> Annual, $120.00</label>
  </fieldset>
  <p role="status">Selected: annual. Renews July 15, 2026 for $120.00.</p>
  <p class="note">Static choice only; no subscription change or billing API runs.</p>
</section>
<style>
  .billing-cycle { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .billing-cycle fieldset { display: grid; gap: 8px; border: 1px solid #cbd5e1; }
  .billing-cycle p, .note { margin: 0; }
  .note { color: #475569; }
</style>

Label the billing cycle section.
The section is labelled by its visible heading.
Group the cycle choices.
The fieldset and legend make the options one named group.
Show the monthly option.
The monthly option shows a pinned display price.
Mark annual as selected.
The checked radio pins annual as the selected choice.
Show the visible renewal summary.
The status text repeats the selected plan and pinned renewal details.
Check the billing cycle choice.
The group shows monthly and annual choices, one selected plan, renewal text, and no billing API.

radio group The billing cycles are presented as one exclusive choice group.

selected plan The checked radio marks the pinned selected plan.

renewal summary The status text shows the selected cycle, renewal date, and total.