✦ Job Loss & Sabbatical Calculator

What if your income stopped for a while?

A layoff. A sabbatical. Caring for a parent. Most calculators pretend it never happens — this one shows you exactly what a career break does to your retirement: how long your cash holds out before you'd crack a 401(k) early, and what the shortfall costs you later. Drop it into your own article in one script tag, and it carries its own identity into your page.

Sibling of <retirement-calc-aca> — the coverage half of the same "what if I step away from work early" question.

Full explanation: What a Job Loss Really Costs Your Retirement →

See it in context

Here's exactly what that looks like — a live instance embedded inside a sample article, using someone else's fonts and colors, not ours. Themed light to blend into a light blog (it ships dark, on-brand, by default).

thecareerpivot.blog/thinking-about-a-year-off-read-this-first
Career & Money · 6 min read

Thinking About a Year Off? Read This First.

CP
The Career Pivot
Sabbaticals, layoffs & second acts

Everyone talks about the freedom of a sabbatical. Almost nobody talks about what it quietly does to the retirement you're counting on — and a forced break, a layoff you didn't choose, works the same way on the math.

The part that's easy to miss

During a break you're not just failing to add to retirement — you may be actively draining it. You cover living costs from savings first, but savings run out. And the moment they do, the next dollar comes from a 401(k) or traditional IRA. If you're under 59½, the IRS takes a 10% penalty on top of ordinary income tax. To net $5,000 of spending money you might have to pull $7,000 or more.

The wall isn't running out of cash. It's the first dollar that comes out of a retirement account before 59½.

Two numbers decide everything

How long your accessible cash — savings, taxable brokerage, Roth contributions — holds out against your monthly spending. And what the shortfall costs you at the finish line: either a permanently lower retirement income, or the extra working years it takes to rebuild. A job loss folds in severance and unemployment for the first months; a voluntary sabbatical usually doesn't. Both land somewhere on the same tradeoff.

Try it with your own numbers

Set when the break starts, how long, what you'd spend, and what you have where. Switch between the job-loss and sabbatical lenses and watch the runway and the two-way cost update →

Try it

That's the exact <retirement-calc-careerbreak> widget, unmodified — same script tag, same engine as the full app. See the full picture → · Jump to the embed code ↓

A worked example

A 50-year-old with $60K in accessible savings and $400K in a 401(k), saving $18K/year, considers a 2-year break at 55 spending $6,000/mo (no severance — a voluntary sabbatical). Their cash covers about 19 months — so a 24-month break outlasts it and forces an early 401(k) withdrawal: a $2,994 penalty. The lasting cost: $1,883/mo less in retirement, every month for life — or about 4 more years of working to rebuild it. That's the real price of the break, and it's the exact figure this calculator's engine returns for that plan.

For developers

Everything below is for embedding this calculator on your own site — integration code, theming, and events.

Live demos

Default — ships dark (on-brand)

Themed light + pre-seeded (age 52, break at 54)

Preview your theme

Pick colors that match your site, then copy the CSS snippet at the bottom. (Starts on a light palette — the calculator ships dark, so this previews the most common override.)

Theme colors

Big number, slider thumb, CTA button
#4f8ec9
Outer surface of the calc
#ffffff
Result area + slider track background
#f7f9fc
Title, slider values, result copy
#1a1f2e
retirement-calc-careerbreak {
  --rc-accent: #4f8ec9;
  --rc-bg: #ffffff;
  --rc-surf: #f7f9fc;
  --rc-text: #1a1f2e;
}

Integration code

Drop this into your HTML:

<script src="https://app.retirementscenario.com/embed/v1/career-break.js"></script>

<retirement-calc-careerbreak></retirement-calc-careerbreak>

Or pre-seed values relevant to your audience:

<retirement-calc-careerbreak
  current-age="48"
  retirement-age="65"
  accessible="90000"
  pretax="420000"
  annual-contribution="22000"
  gap-start-age="50">
</retirement-calc-careerbreak>

Attributes

AttributeDefaultRange
current-age4525 – 64
retirement-age65current-age+1 – 75
accessible1200000 – 5,000,000 (cash + taxable + Roth contributions — penalty-free)
pretax3000000 – 10,000,000 (401k / traditional IRA)
annual-contribution240000 – 200,000 (saved per year, until the break)
ss-monthly25000 – 8,000 (est. monthly Social Security at claim)
gap-start-age52current-age – (retirement-age−1)
refsrc(none)partner attribution tag

Set on the sliders, not attributes: break length, monthly spending during the break, and (job-loss lens only) severance + unemployment income. The lens toggle — job loss vs sabbatical — lives in the widget header; the job-loss lens folds in severance for the first months of the gap, the sabbatical lens assumes none.

Honest scope: a focused single-person model. Flat effective tax on pre-tax draws, ~6% growth, retirement through age 90. Doesn't model a reduced-income sabbatical, a spouse's earnings, ACA subsidies, or a lower salary on return — the full app handles households, real taxes, and ACA. A projection, not a prediction. No data leaves the browser.

Theming

The widget ships dark (on-brand for our own articles). Override CSS custom properties on the host to match your site — for a light blog, set the surface/text vars:

retirement-calc-careerbreak {
  --rc-accent: #4f8ec9;    /* primary — big number, slider thumb, CTA */
  --rc-accent2: #3dd68c;   /* positive/secondary accent */
  --rc-bg: #ffffff;        /* card background */
  --rc-surf: #f7f9fc;      /* sub-surface (result area, slider track) */
  --rc-border: rgba(20,30,50,0.10);
  --rc-text: #1a1f2e;
  --rc-muted: #6a7280;
  --rc-red: #f05c5c;       /* "runs dry" verdict */
  --rc-amber: #f59e0b;     /* "cracks the 401(k)" verdict */
  --rc-font: inherit;      /* pick up your page's font */
}

Events

The element emits two custom events you can listen to (both bubble + composed, so they cross the shadow boundary):

document.querySelector('retirement-calc-careerbreak')
  .addEventListener('rc-calculated', (e) => {
    console.log('Lens:', e.detail.lens);                    // 'jobloss' | 'sabbatical'
    console.log('Cash runway (months):', e.detail.cashRunwayMonths);
    console.log('Cracks 401(k) early?', e.detail.crackedPretax);
    console.log('Runs dry before retirement?', e.detail.wentBroke);
    console.log('Early-withdrawal penalty ($):', e.detail.penaltyPaid);
    console.log('Retirement income cost ($/mo):', e.detail.monthlyIncomeCost);
    console.log('Extra working years to rebuild:', e.detail.retireDelayYears);
    console.log('Total nest-egg cost ($):', e.detail.nestEggCost);
    console.log('Inputs:', e.detail.inputs);
  });

document.querySelector('retirement-calc-careerbreak')
  .addEventListener('rc-cta-clicked', (e) => {
    console.log('User clicked CTA to:', e.detail.url);
  });