Pattern

Checkout

A short payment path that keeps total, method, and confirmation in view.

Preview

Order

Pro plan · $24 / month

Input Select Radio Button Card

Why does this component exist?

Appearance is not enough. This is the contract for when the control earns a place in the product.

When to use

Use for a single-order payment. Split address and payment only when the form is genuinely long.

When not to use

Don't force this layout onto a task with a different risk profile or a different set of fields.

UX problem

Let someone pay without losing the order summary or second-guessing the total.

Accessibility

Every field in the pattern keeps a visible label, and primary actions remain real buttons. Error copy sits next to the field that failed.

Code

<section>
  <Card title="Order">Pro plan · $24/mo</Card>
  <RadioGroup label="Payment">
    <Radio>Card</Radio>
    <Radio>Invoice</Radio>
  </RadioGroup>
  <Input label="Card number" />
  <Button variant="primary">Pay $24</Button>
</section>

Loading…