All components (204)

Installment calculator

Commerce · InstallmentCalculator · .amset-installments

What it is and when to use it

Paying in installments: you choose the months and see how much per month, the last installment if it changes because of the cents, the total, what financing costs and the TIN and TAE.

When to use it

On the page of an expensive product or at checkout, when the store offers financing.
amount is what is financed (in currency, euros by default); value and onChange carry the chosen months.
plans with the months (months) and the TIN (tin) of each: with a TIN of 0 it says "Interest-free"; otherwise, how much extra it costs, with the figure and the word.
minAmount so that small amounts are not financed: below it, it says from how much it is possible and how much is missing, instead of showing installments.
terms for who finances and the small print: they go below, always in view.

When not to

Only the monthly price on a product card: Amount with perUnit="/mes".
Comparing the rates of a subscription: PricingTable.

Keyboard: the terms are a one-option SegmentedGroup (a radio group): Tab enters through the chosen term and the arrow keys change the term.

Accessibility: the group is named "Number of installments", with the label in view. The result is a role="status": when the term changes, the new installment is announced. Total, cost and TIN/TAE go in a definition list (dl), and the cost is spoken in words ("Interest-free", "€15.13 more"). The last installment is only mentioned if it differs from the others.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how amounts and percentages are written. The TAE is calculated from the TIN, without fees: if the lender charges an opening fee, the terms must say so.

Fine-tuning: CSS variables --amset-installments-*: -data, -detail, -figure, -gap, -label, -radius, -result-padding. The size moves the padding of the result, the large figure and the font sizes.

What it looks like

Number of installments

3 months

6 months12 months

€80.00 a month for 6 months

Total to pay: €480.00
Cost of financing: Interest-free
Nominal rate / APR: 0 % / 0 %

<InstallmentCalculator
  amount={480}
  plans={planes}
  value={meses}
  onChange={setMeses}
/>

Props

Import it with import { InstallmentCalculator } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`amount`required	`number`	—
`onChange`required	`(months: number) => void`	—
`plans`required	`readonly InstallmentPlan[]`	—
`value`required	`number`	Months of the chosen plan.
`className`	`string`	Merged with the library classes; it does not replace them.
`currency`	`string`	—
`minAmount`	`number`	Below this, nothing is financed.
`size`	`"sm" \| "md" \| "lg"`	—
`terms`	`string`	Who finances it and the small print: they go below, always in view.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-installments-gap`	`var(--amset-space-3)`
`--amset-installments-result-padding`	`var(--amset-space-3) var(--amset-space-4)`
`--amset-installments-radius`	`var(--amset-radius)`
`--amset-installments-figure`	`var(--amset-text-xl)`
`--amset-installments-label`	`var(--amset-text-sm)`
`--amset-installments-detail`	`var(--amset-text-xs)`
`--amset-installments-data`	`var(--amset-text-base)`

How to change it

.amset-installments {
  --amset-installments-gap: ...;
  --amset-installments-result-padding: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: