FORMS · FORM ELEMENTS

Extras

Steppers, ratings, colour pickers, tag inputs, PIN, copy fields, inline edit and a signature pad.
THEME
DENSITY
01

Playground

Control, size, state — live
PREVIEWLive
Seats
Hold + or − to repeat
role="spinbutton" · ↑ ↓ · Shift ×10 · Home / End
ACCESSIBILITY TREE
rolespinbutton
name"Seats"
value3 seats · min 1 · max 20
buttons− / + · tabindex -1 (keys do it)
Settings
CONTROL
SIZE
STATE
CODE
<Stepper label="Seats" value={3} min={1} max={20} holdToRepeat/>
02

Variants

7 controls, all working
Stepperhold to repeat · type · ↑ ↓
Guests
Discount
2 guests · 10% off · hold a button to repeat
Ratinghalves · hover preview · read-only average
Your rating
Very good +
4.6
4.6
128 client reviews
Colour pickerbrand palette · hex · recent · eyedropper
Best text on it: dark · 12.1:1
RECENT
Tag inputautocomplete · max 6 · duplicates
Skills
BrandingPackaging
2 / 6 · type “mo” or a new skill
Copy fieldAPI key · reveal · copy · regenerate
Live API key
Created 13 Sep 2026 · last used 2 h ago
Inline editclick · Enter saves · Esc cancels
Client
Contact
Budget
Signature paddraw · undo · clear · export
Draw with mouse, pen or finger
Pointer events with pressure-free smoothing. Always offer a typed-name alternative.
03

States

Stepper, rating, tags × 6 states
DEFAULTHOVERFOCUSERRORDISABLEDREAD-ONLYStepperRatingTags
04

Behavior

Hold to repeat, contrast, PIN paste
Hold to repeataccelerates after 400 ms
REPEATpress and hold + or − · 400 ms delay → 120 ms → 50 ms after 10 repeats
Contrast checktext on your colour · AA / AAA
Aa · Invoice12.06:1 · AAA
Aa · Invoice1.54:1 · Fail
Uses the colour from the picker above (#9ADBE6). WCAG: 4.5:1 for body text, 3:1 for large text and UI.
PIN with paste4 cells · paste fills all · masked
Masked — each digit is its own input
05

In Avava

Client feedback, brand kit, contract signing
Client feedbackafter the Lume delivery
How did we do?
Tap a star
What stood out?
Pick a rating to send
Brand kit · Lumecontrast badges · copy HEX
Aa
Lume Cream#f3e7d3 · 15.2:1 with dark
AAA
Aa
Lume Clay#c4693f · 4.8:1 with dark
AA
Aa
Forest#2f4a3a · 9.7:1 with white
AAA
Aa
Sky#9cc7d8 · 10.2:1 with dark
AAA
Aa
Ink#1d1d1f · 16.8:1 with white
AAA
Sign the contractname · date · signature
SIGN BY
Draw with mouse, pen or finger
Add your name, a signature, agreement to sign
06

Rules & a11y

Which control, screen readers
Which control?match the job
Stepper
Small whole numbers, ±1 mattersGuests, seats, quantity
Rating
Quick sentiment on a 5-point scaleFeedback, reviews
Colour field
Brand or theme coloursAccent, labels, charts
Tag input
Open set of labels with suggestionsSkills, keywords, topics
PIN
Short secret, digit by digitApprovals, 2FA
Signature
Legal intent, with a typed fallbackContracts, delivery receipts
Screen readersreal roles, real alternatives
✓role="spinbutton" + aria-valuenowStepper; − / + buttons are tabindex -1 — keys do the job
✓role="radiogroup" for starsEach star is a radio: “3 stars — Good”
✓combobox + listbox for tagsaria-activedescendant follows ↑ ↓
✓autocomplete="one-time-code"Lets phones fill the PIN from SMS
✓Contrast shown as text“4.8:1 · AA”, not just a colour dot
✓Typed-name alternativeA canvas signature is never the only way
DO✓Let people type into a stepper, not only click✓Show what each star means in words✓Check contrast as soon as a colour is chosen✓Offer a typed signature next to the pad✓Confirm before regenerating a key
DON’T✕Use a stepper for big ranges — use a field or slider✕Rate with colour or emoji alone✕Block paste in PIN cells✕Show an API key in full by default✕Save inline edits without a way to undo