Yellow Belt ~15 min
Form Design Kata
Build an accessible, fillable form
Why This Kata
A well-designed form isn't just about labels and inputs – it's a chain of trust signals. This Kata walks through the exact sequence that prevents the two most common form failures: unclear states and inaccessible targets.
AccessibilityDesigning digital products that people with disabilities can perceive, understand, navigate, and interact with – which makes them better for everyone.
AffordanceA property of an object or element that signals what actions are possible – a button affords pressing, a slider affords dragging, a text field affords typing.
0 / 3 steps complete
0/36 interactions
45s active time left
Design style
Best for: SaaS products and dev tools that want a modern, approachable feel.
Brand color
#2563EBUsed for focus ring and active states
Element type
All states
Default
Empty, idle state
Hover
Mouse over the input
Focus
Keyboard or click focus
Filled
Has valid content
Error
Validation failed
Please enter a valid email
Disabled
Not interactive
Read-only
Visible but not editable