← All patterns

Disclosure

APR disclosure: welding the terms to the number

Presenting a financing rate or offer so the required cost terms travel with the number every time it appears.

Regulatory Breadcrumb

High risk

Regulatory driver

Truth in Lending Act / Regulation Z — 12 CFR 1026, incl. §1026.24 (advertising) and the clear-and-conspicuous standard

What the rule requires

  • If you state a rate, state it as an “annual percentage rate,” using that term.
  • If the APR can increase after consummation, say so.
  • When an advertised rate triggers additional disclosures, present them with equal prominence and in close proximity to that rate.
  • Make required disclosures clear and conspicuous — not obscured by shading, coloring, graphics, or interactions that hide them.

What the rule does not dictate

Reg Z sets a prominence and proximity bar. It does not tell you to use a modal, a tooltip, an accordion, or a particular layout — only that whatever you choose can’t bury the terms.

UX implications

  • “APR” has to be a component, not a label — the number and its qualifying terms render as one unit that responsive breakpoints can’t split.
  • A tooltip or a “see details” link generally fails “close proximity and equal prominence” for the triggered disclosures — the terms need to be visible where the rate is.
  • Marketing surfaces and product surfaces should share one disclosure component so an A/B test can’t quietly drop it.
  • If the rate is a range or “rates from X%”, the representative example and its assumptions ride along with it.

Pattern anatomy

  • A rate unit: APR value + the term “annual percentage rate” + variable-rate statement + fee summary
  • A representative-example block for ranges and “rates from”
  • A full-terms surface (screen or expandable panel) that’s reachable but not a substitute for the inline terms
  • Consistent placement across ad, landing page, in-flow, and confirmation

Do / Don't

Do

  • Render the APR and its qualifiers as a single component reused everywhere.
  • Give the variable-rate statement the same visual weight as the rate.
  • Keep the disclosure inside every experiment variant.

Don't

  • Show a big rate hero with the terms one tap away behind “details”.
  • Set the disclosure in 10px grey under a 40px rate.
  • Let growth test a “cleaner” version that removes it.

If you get it wrong

TILA carries statutory damages and a private right of action, is a standard exam focus, and advertising violations have produced CFPB enforcement actions.

Primary sources

Last reviewed 2026-08-28. Verify against the primary source before you ship.

The whole library

Every pattern with its full breadcrumb, plus a Figma file with annotated screens and a printable quick-reference. Personal and team use, 12 months of updates.

Get it on Gumroad