Todos los componentes (204)

Calculadora de cuotas

Comercio · InstallmentCalculator · .amset-installments

Qué es y cuándo usarlo

Pagar a plazos: se eligen los meses y se ve cuánto al mes, la última cuota si cambia por los céntimos, el total, lo que cuesta financiar y el TIN y la TAE.

Cuándo usarlo

En la ficha de un producto caro o en el pago, cuando la tienda ofrece financiación.
amount es lo que se financia (en currency, euros por defecto); value y onChange llevan los meses elegidos.
plans con los meses (months) y el TIN (tin) de cada uno: con TIN 0 dice «Sin intereses»; si no, cuánto cuesta de más, con la cifra y la palabra.
minAmount para no financiar lo pequeño: por debajo dice desde cuánto se puede y cuánto falta, en vez de enseñar cuotas.
terms para quién financia y la letra pequeña: van debajo, siempre a la vista.

Cuándo no

Solo el precio al mes en una tarjeta de producto: Amount con perUnit="/mes".
Comparar tarifas de una suscripción: PricingTable.

Teclado: los plazos son un SegmentedGroup de una opción (un grupo de radio): Tab entra por el plazo elegido y las flechas cambian de plazo.

Accesibilidad: el grupo se llama «Número de plazos», con la etiqueta a la vista. El resultado es un role="status": al cambiar de plazo se anuncia la cuota nueva. Total, coste y TIN/TAE van en una lista de definiciones (dl), y el coste se dice con palabras («Sin intereses», «15,13 € más»). La última cuota solo se menciona si es distinta de las demás.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben importes y porcentajes. La TAE se calcula del TIN, sin comisiones: si la financiera cobra comisión de apertura, lo tienen que decir las terms.

Aspecto fino: variables CSS --amset-installments-*: -data, -detail, -figure, -gap, -label, -radius, -result-padding. El tamaño mueve el relleno del resultado, la cifra grande y los cuerpos de letra.

Cómo se ve

Número de plazos

3 meses

6 meses12 meses

80,00 € al mes durante 6 meses

Total a pagar: 480,00 €
Coste de financiar: Sin intereses
TIN / TAE: 0 % / 0 %

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

Props

Se importa con import { InstallmentCalculator } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`amount`obligatoria	`number`	—
`onChange`obligatoria	`(months: number) => void`	—
`plans`obligatoria	`readonly InstallmentPlan[]`	—
`value`obligatoria	`number`	Meses del plan elegido.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currency`	`string`	—
`minAmount`	`number`	Por debajo de esto no se financia.
`size`	`"sm" \| "md" \| "lg"`	—
`terms`	`string`	Quien financia y la letra pequeña: van debajo, siempre a la vista.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--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)`

Cómo se cambia

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

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: