← Back to Components

Form Components

Form wrapper component with comprehensive styling for all form elements including inputs, selects, textareas, fieldsets, and helper elements. Supports multiple sizes, states, validation, semantic grouping, and accessibility features.

Basic Form Usage

Form wrapper component that provides styling context for all form elements.

This is a basic text input
We'll never share your email
Select your department

Form Element Sizes

All form elements support three sizes: Small (28px), Medium (36px), and Large (48px).

Prominent form fields
Standard form fields
Compact form fields

Form Element States

All form elements support multiple states: Default, Focused, Error, and Disabled.

Click to see focus state
This field has an error

Complete Form with Validation

Real-world form example with validation, error handling, and character counting.

Enter your first name
Enter your last name
We'll use this to contact you
Select your department
Select the priority for your request
Describe your request or feedback
0/500

Form Checkboxes

Checkbox components with multiple sizes, states, and interactive functionality.

Different checkbox sizes for various contexts
Various checkbox states for different situations
Interactive checkboxes for user preferences

Form Radio Buttons

Radio button groups for single-choice selections with consistent styling.

Large Radio Buttons

Medium Radio Buttons

Small Radio Buttons

Different radio sizes for various contexts

Default State

Error State

Disabled State

Various radio states and configurations
Choose your preferred contact method

Form Fieldset Grouping

Form fieldsets provide semantic grouping of related form fields using fieldset and legend elements for better accessibility and visual organization.

📋 Dedicated Fieldset Documentation

Form fieldsets have comprehensive examples and documentation on a dedicated page.

View Form Fieldset Examples