FORMS · FORM LAYOUTS

Sticky actions

Long forms whose Save stays in reach — bottom bar, sticky header, side summary, floating toast, mobile and wizard footers.
THEME
DENSITY
01

Playground

Position, visibility rule, style, state — scroll the preview
PREVIEW · SCROLL INSIDELive · bar hidden
Edit project
BASICS
BUDGET & DATES
SCOPE
NOTES
Settings
POSITION
SHOW BAR
STYLE
STATE
LIVE
changes0
real buttonsoff-screen
scrolled0 px
content belowyes → shadow
CODE
<StickyActions position="bottom" show="whenDirty" variant="blur" changes={0} onSave={save} onDiscard={confirmDiscard}/>// ⌘S saves · Esc asks to discard · content gets bottom padding = bar height
02

Variants

Floating toast, mobile, wizard
Floating toastappears on the first change · centred
0 unsaved changes
Mobile · full-width bottomsafe-area aware
New expense
Wizard footerBack / Next stay put · stepper
1 · Client
2 · Scope
3 · Budget
4 · Review
Step 1 of 4
03

States

The action bar
HIDDEN
Hidden
DIRTY
3 unsaved changes
SAVING
Saving…
SAVED
✓ Saved
ERROR
Couldn’t save — check your connection
DISABLED
Read-only — you can’t edit this
04

Behavior

Dirty tracking, keyboard
Dirty trackingwhat changed · undo one · discard all
No changes yet — edit a field above
All changes saved
Keyboard⌘S saves · Esc discards (asks first)
Click here, then press ⌘ S or Esc. Shortcuts also work while typing in the fields above.
No changes
05

In Avava

Invoice editor
Invoice editorline items · sticky totals and actions
$2,400.00
$5,100.00
$900.00
06

Rules & a11y

When to use, focus and content
When to make actions stickylength decides
Sticky
Forms taller than one screenSettings, editors, long briefs
Not sticky
Short forms, dialogsThe buttons are already in view
Toast
Many independent settingsAppears only after the first change
Side summary
A total or status mattersCheckout, invoices, quotes
Screen readers & focusdon’t hide content or focus
✓role="region" aria-label="Form actions"Landmark to jump to; status text in aria-live="polite"
✓Reserve space below the formBottom padding = bar height, so the last field isn’t hidden
✓DOM order: form, then barTab reaches Save after the last field, not before the first
✓⌘S / Ctrl+S and EscEsc asks before discarding; focus returns to the form
✓Don’t trap focusThe bar is part of the page, not a modal
DO✓Show the bar only when there is something to save✓Say how many changes are pending✓Ask before discarding, never before saving✓Leave room so the bar never covers a field✓Keep the original buttons at the end of the form too
DON’T✕Make actions sticky on short forms✕Cover the last field or the error summary✕Hide Save behind a scroll on mobile✕Show “Saved” for unsaved state✕Use a sticky bar and a sticky header with the same buttons