Forms

Text input

Text input — every state

• Text input with no content
• Text input with content
• Text input with placeholder (avoid)
• Text input with focus
• Text input that's disabled
• Text input that's read-only
• Text input with an error
  • Must be at least 8 characters.
  • Must include a number.
• Text input that's optional (optional)

Textarea — every state

• Textarea with no content
• Textarea with content Some content that wraps over a couple of lines so the multi-line shape reads.
• Textarea with placeholder (avoid)
• Textarea with focus Some content
• Textarea that's disabled Some content
• Textarea that's read-only Some content
• Textarea with an error too short
  • Description must be at least 100 characters.
• Textarea that's optional (optional) Some content

Single checkbox

Checkbox group

Radio group

Choices — focused

The whole <label class='option'> picks up the focus ring (via :focus-within), since the label is the click target. Shown statically here via data-fakestate='focused'.

Single checkbox — padded

Checkbox group — padded

Form with submit