Skip to main content

Form Elements

Accessible form components with validation states for the Fondation Botnar Dashboard

8
Input Types
4
Validation States
WCAG
AA Compliant
100%
Keyboard Accessible

Interactive Form Demo

Please enter your first and last name
We'll use this to send you important updates
Optional: Include country code for international numbers
Choose the option that best describes your organization
/500 characters

Form submitted successfully!

Thank you for your application. We'll be in touch soon.

Form Element Showcase

Input Fields

This field is valid
This field has an error

Other Elements

Radio Options

Usage Guidelines

Accessibility Best Practices

  • • Always include proper labels for form fields
  • • Use aria-describedby for help text and errors
  • • Mark required fields clearly
  • • Provide clear validation feedback
  • • Ensure keyboard navigation works
  • • Use fieldsets for radio button groups

Form Design Guidelines

  • • Group related fields together
  • • Use consistent spacing and alignment
  • • Provide helpful placeholder text
  • • Show validation states clearly
  • • Use appropriate input types
  • • Keep forms as simple as possible