Chapter 09 / Everyday UI

The parts every real site needs.

Less spectacle, more product. Forms that help, dialogs that trap focus, a command palette, notifications, carousels, pricing and data. Built on native elements wherever the browser has one.

Demos

Multi-step form with validation

Four steps, validation as you go, a password strength meter and a review step. Errors are announced to screen readers, and nothing is ever sent.

  • Constraint validation
  • aria-invalid
  1. Account
  2. Security
  3. Plan
  4. Review
Create your account

Native dialog, popover and tooltip

A modal <dialog> with a real backdrop and Escape to close, a popover menu with light dismiss, and a tooltip that also works with the keyboard.

  • <dialog>
  • Popover API
A tooltip in pure CSS

Nothing chosen yet

Delete "Web Lab"?

This is a demo, so nothing is deleted. A real one would warn you that this cannot be undone.

Command palette

Fuzzy search over every demo on the page plus a few actions, with arrow keys, Enter and highlighted matches. It jumps straight to what you pick.

  • Fuzzy search
  • Keyboard first
⌘K

Press ⌘ K or Ctrl K anywhere on this page to search all demos and actions.

Toast notifications

Success, error, undo with a countdown, and a loading toast that resolves itself. Announced politely to screen readers, and dismissable by swipe.

  • aria-live
  • Pointer gestures

Toasts stack in the corner and pause while you hover or focus them. Swipe one sideways to dismiss it, or press Alt+T to jump to the newest.

Pricing with a billing toggle

Three tiers, a highlighted favourite and prices that count to their new value when you switch billing. Fictional product.

  • Number tween
  • Segmented control
Starter

9/mo

  • 1 site
  • Basic motion
  • Email support
PopularStudio

29/mo

  • 10 sites
  • 3D and sound
  • Priority support
Agency

79/mo

  • Unlimited sites
  • Generated media
  • Dedicated help

Sortable, filterable table

Every demo on the site, from the shared catalog. Search, filter by chapter, sort any column, and click a row to open it, even on another page.

  • aria-sort
  • Sticky header