Form Components

Form components provide a comprehensive toolkit for building interactive, accessible, and user-friendly forms. These components handle input validation, state management, user feedback, and complex form workflows across React, Angular, and vanilla JavaScript applications.

Available Components

Input & Selection Controls

Button - Primary interactive element for triggering actions with multiple variants, loading states, and accessibility features
Checkbox - Boolean input control with three-state support, validation integration, and accessibility compliance
Input - Versatile text input component with validation, formatting options, and accessibility features for data collection
Number - Specialized numeric input with formatting, validation rules, and increment/decrement controls
Password - Secure password input with visibility toggle, strength indicators, and security features
Radio - Single-select input control with group coordination, validation integration, and accessibility support
Radio Card - Enhanced radio button with card-style presentation for richer option displays and feature selection
Select - Dropdown selection component with search functionality, multi-select support, and custom styling
Switch - Toggle control for boolean states with smooth animations and accessibility compliance
Textarea - Multi-line text input with auto-resize, character limits, and validation support
Time - Specialized time input with formatting, validation rules, and accessibility support

Form Structure & Organization

Form - Container component providing form state management, validation coordination, and submission handling
Form Expander - Collapsible section component for organizing optional or advanced form content with state persistence
Form Section - Organizational component for grouping related form fields with visual grouping and semantic structure
Button Group - Container for organizing related buttons with consistent spacing and responsive behavior
Button Section - Organizational component for grouping buttons within form sections and multi-step processes
Radio Section - Container for organizing radio button groups with consistent styling and accessibility support
Toggle Section - Expandable section component for organizing optional form content with collapsible behavior

Labels & Display Elements

Label - Accessible label component with proper association and consistent styling for form controls
Label Container - Container component for managing label and input field relationships with proper association
Display Field - Read-only field component for displaying formatted data within forms and summaries

Feedback & Utilities

Notice - Notification component for displaying important messages with multiple severity levels and accessibility support
Toast - Temporary notification component with auto-dismiss, positioning options, and system feedback capabilities
Focus - Focus management utility for enhanced accessibility, user navigation, and programmatic focus control
Table Editor - Inline editing component for tabular data with validation support and responsive behavior
Wizard - Multi-step form component for complex workflows with step management and progress tracking

Key Features

Comprehensive Coverage - Complete set of 26+ form components for all input types and organizational needs
Accessibility First - Built-in WCAG compliance with proper ARIA attributes and keyboard navigation support
Framework Agnostic - Compatible with React, Vue, Angular, and vanilla JavaScript implementations
Validation Integration - Seamless integration with popular validation libraries and custom validation logic
Responsive Design - Mobile-first approach with adaptive layouts and touch-friendly interactions
Type Safety - Complete TypeScript definitions for enhanced developer experience

Design Principles

Clarity - Clear visual hierarchy and intuitive interaction patterns for optimal user experience
Consistency - Uniform behavior and styling across all components following PWC Design System standards
Accessibility - Universal design principles ensuring usability for all users and assistive technologies
Performance - Optimized for fast rendering, smooth interactions, and minimal bundle impact
Flexibility - Configurable options and extensive customization to meet diverse project requirements

For detailed implementation guidance, explore individual component documentation or visit our Storybook examples for interactive demos.