# Mortgage Calculator (Moonarc)

What a home costs a month. To buy: the price, the deposit on a slider, the rate and the term, and the monthly payment, the loan and the interest over the term. To rent: the deposit in months and the household's income, and the money to move in, the year's rent and the rent's share of the income. The first figures are worked out at build from the defaults and a few lines of script work out the rest as the fields change; without JavaScript the fields are not shown and a table worked out at build takes their place. An estimate, and it says so under itself.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/mortgage-calc` (license key required)
- Tier B · category section · trigger click
- Readout: `<MortgageCalc mode="buy" amount={845000} deposit={20} rate={4.5} term={25} />`
- Browser support: widely (every browser); elsewhere: without JavaScript a table of payments worked out at build
- Measured cost: 845 B raw JS · 526 B gzip · + Reveal + runtime (with dependencies 3.8 kB raw; CSS 10.4 kB raw)
- Page: https://moonarc.dev/components/mortgage-calc/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `amount` | `number` | none | The price (buy) or the monthly rent (rent), in whole units. |
| `mode` | `'buy' | 'rent'` | `'buy'` | A loan's monthly payment, or the money to move in and the rent's share of the income. |
| `format` | `string` | `'{currency}{n}'` | How a sum prints: {currency} is the currency, {n} the number. |
| `currency` | `string` | `'$'` | The currency's sign or code. |
| `locale` | `string` | `'en-US'` | How the numbers are grouped. |
| `deposit` | `number` | `20` | Buy: the deposit's share the slider starts at, in %. |
| `rate` | `number` | `4.5` | Buy: the yearly rate the field starts at, in %. |
| `term` | `number` | `25` | Buy: the term in years the field starts at. |
| `terms` | `number[]` | `[15, 20, 25, 30]` | Buy: the terms offered. |
| `months` | `number[]` | `[1, 2, 3]` | Rent: the deposits offered, in months. |
| `income` | `number` | `6000` | Rent: the household income a month the field starts at. |
| `words` | `Partial<Record<…, string>>` | `English` | Every word of the fields, the results, the table and the note. |
| `headline` | `string` | none | The heading. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `level` | `2 | 3` | `2` | Heading level of the heading. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import MortgageCalc from '@/components/moonarc/pro/MortgageCalc.astro';
---
<MortgageCalc
  headline="What it costs a month"
  amount={845000}
  deposit={20}
  rate={4.5}
  term={25}
/>
```

## Reduced motion

Nothing moves; the figures change in place.

## With ClientRouter

Bound per element through the runtime.

## Craft

- The figures on first paint are the build's, from the defaults, so the page reads right before the script runs and in a crawler.
- The fields need the script, so they are shown only under the runtime's gate (html[data-ma-js]); without it a table of payments by deposit and term, worked out at build, takes their place.
- The results sit in a polite live region, so a screen reader hears the new monthly figure after a change.

## Replaces

- Embedded mortgage calculator widgets from lenders

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/mortgage-calc` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: reveal.