Sheet

A bottom sheet slides up from the bottom of the screen. It's the primary mobile overlay pattern in Settld — used for expense details, category pickers, settings panels, and the settle-up confirmation flow. Three snap points: peek (40%), half (50%), full (90%). Dismisses by swiping down or tapping the backdrop.

Variants

Snap points

States

On dark surfaces

Anatomy

Usage

Accessibility

Code

HTML

<!-- Backdrop -->
<div class="sheet-backdrop" id="sheet-backdrop" aria-hidden="true"></div>

<!-- Sheet -->
<div class="sheet sheet--half"
     role="dialog"
     aria-modal="true"
     aria-labelledby="sheet-title"
     id="expense-sheet">
  <div class="sheet__inner">
    <div class="sheet__handle" aria-hidden="true"></div>

    <div class="sheet__header">
      <h2 class="sheet__title" id="sheet-title">Goa Airbnb</h2>
      <button class="sheet__close" aria-label="Close">×</button>
    </div>

    <div class="sheet__body">
      <!-- scrollable content -->
    </div>

    <div class="sheet__footer">
      <button class="btn btn-teal btn-lg btn-block">Settle up →</button>
    </div>
  </div>
</div>

JS — open / close

function openSheet(sheetId) {
  const sheet    = document.getElementById(sheetId);
  const backdrop = document.getElementById('sheet-backdrop');
  sheet.classList.add('open');
  backdrop.classList.add('open');
  document.body.style.overflow = 'hidden';
  sheet.querySelector('.sheet__close')?.focus();
}

function closeSheet(sheetId) {
  const sheet    = document.getElementById(sheetId);
  const backdrop = document.getElementById('sheet-backdrop');
  sheet.classList.remove('open');
  backdrop.classList.remove('open');
  document.body.style.overflow = '';
}

// Close on backdrop click or Escape
document.getElementById('sheet-backdrop')
  .addEventListener('click', () => closeSheet('expense-sheet'));
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') closeSheet('expense-sheet');
});

CSS classes

Design tokens used