Form Layout

A realistic form combining multiple Lexicon input components with validation states. Responsive: two columns on desktop, single column on mobile.

First name Looks good

Last name Looks good

Email Enter a valid email address

Role

DesignerDeveloperManager

Team size

1–56–2021–5050+

Bio0 / 280 characters

I agree to the terms and conditions

Preferred contact Email Phone Slack

Components used

• Input, Textarea, Select
• Checkbox, Radio
• Button

Key implementation details

• Two-column grid on desktop (grid-template-columns: 1fr 1fr), collapses to single column below 640px
• Validation states shown inline: success (green check), error (red with message)
• Form actions right-aligned with secondary + primary button pair
• All inputs use consistent --md sizing for visual rhythm