Forms

Beautiful, accessible form controls including inputs, textareas, selects, checkboxes, and radio buttons.

Text Inputs

Use the form-input class for text inputs. Wrap in form-group with a label for proper spacing.

Basic Input

Input with Help Text

Input with Help Text

Must be at least 8 characters long.

Input States

Input States

This field is required.

Textarea

Textareas use the same form-input class as regular inputs.

Textarea

Select

Dropdown select inputs with consistent styling.

Select

Checkboxes

Custom-styled checkboxes with labels.

Checkboxes

Radio Buttons

Radio button groups for single selection.

Radio Buttons

Complete Form Example

A full contact form demonstrating all form elements together.

Contact Form

Contact Us

Accessibility

Best Practices:
  • Always use label elements with for attribute matching input id
  • Use required attribute for required fields
  • Provide helpful error messages with form-error class
  • Use appropriate type attributes (email, tel, url, etc.)
  • Include autocomplete attributes for better UX
  • Ensure sufficient color contrast for all states