Bollard UI

Start here

The essentials

If you add only a few components, add these. They cover the mistakes almost every app sees: typo'd emails, wrong amounts, double submits, accidental deletes and lost drafts. New to the setup? Getting started takes two minutes.

  1. 01Email InputSpots misspelled email domains like gmial.con and offers a one-tap fix, never an automatic one, so sign-ups don't bounce.
  2. 02Amount InputA money field that groups digits as you type, spells the amount out and flags an amount about ten times off the usual one.
  3. 03Phone InputCleans pasted phone numbers, picks the country from the dial code and checks the digits against libphonenumber ranges, so an unreachable number isn't saved.
  4. 04Password InputWarns about Caps Lock, a non-Latin keyboard layout and pasted spaces as they happen, so a typo doesn't look like a wrong password.
  5. 05Type to ConfirmConfirmation dialog that unlocks a destructive action only after the exact name is typed, flagging a typo as it happens.
  6. 06Undo ToastRuns actions optimistically and commits only after an undo window, so a mistake can be taken back without an "Are you sure?".
  7. 07Hold to ConfirmA button that fires only after a full press-and-hold, so a stray click or tap doesn't trigger a destructive action.
  8. 08Safe SubmitCollapses repeated clicks, Enter spam and double-taps into one request and reuses an idempotency key on retry, so your server can dedupe.
  9. 09Duplicate Payment GuardTells a double tap, a retry after a timeout and a deliberate repeat payment apart, so the same payee isn't paid twice by accident.
  10. 10Secret Paste GuardSpots API keys, tokens and private keys as they're pasted or typed into a field and offers one-tap Redact before they're sent.
  11. 11OTP Paste InputPulls the right one-time code out of a whole pasted SMS or email, ignoring phone numbers and amounts, and accepts digits in any script.
  12. 12Draft RestoreAutosaves a form locally and offers the draft back on reopen, keeping any value the server changed since, so work isn't lost or stale data restored.
  13. 13Unsaved Changes BarNames every unsaved field, warns before the tab closes, saves on Ctrl/⌘+S and asks twice before discarding.
  14. 14Danger ZoneKeeps destructive settings visible but locked until deliberately unlocked, so a stray click doesn't delete or transfer something.
  15. 15Environment BadgeMarks the page, tab title and favicon with the environment, so nobody edits production thinking it is staging.

Then browse by the screen you're building: all components.