Overview

Migrate all MUI form-related components to shadcn/ui equivalents.

Parent Issue: #18993
Estimated Duration: 2-3 days
Priority: Medium
Depends on: #18995 (Core Components)

Component Usage Analysis

• FormControl: 3 usages
• FormControlLabel: 11 usages
• FormHelperText: 8 usages
• FormLabel: 1 usage
• FormGroup: 1 usage
• Checkbox: 12 usages
• Radio/RadioGroup: 10 usages (5 each)
• Switch: 3 usages
• Select: 3 usages
• Autocomplete: 5 usages
• Total: 45 form component instances

Tasks

Form Structure Components

• Generate shadcn form components (Label, FormField, FormMessage)
• Create form layout utilities
• Set up form validation integration
• Configure error state styling

Input Components

• Generate Checkbox component
• Generate RadioGroup component
• Generate Switch component
• Generate Select component
• Create Combobox for Autocomplete replacement

Form Integration

• Migrate FormControl usage (3 instances)
• Replace FormControlLabel (11 instances)
• Convert FormHelperText (8 instances)
• Update Checkbox components (12 instances)
• Migrate Radio/RadioGroup (10 instances)
• Replace Switch components (3 instances)
• Convert Select components (3 instances)
• Migrate Autocomplete to Combobox (5 instances)

Files to Update

Form-Heavy Components

• User settings forms
• Workspace creation forms
• Template configuration forms
• Authentication forms
• Admin configuration forms

Specific Files

• Form validation utilities
• Settings page components
• Onboarding flow forms
• Configuration wizards

Implementation Strategy

1. Generate Components: Create all form-related shadcn components
2. Form Utilities: Set up validation and state management
3. Simple Forms: Start with basic input forms
4. Complex Forms: Handle multi-step and validation-heavy forms
5. Integration: Ensure proper form library integration

Acceptance Criteria

• All form components use shadcn implementation
• Form validation works correctly
• Error states display properly
• Accessibility features maintained
• Form submission handling preserved
• All form tests pass

Component API Compatibility

Form Component Mapping

// MUI -> shadcn
FormControl -> FormField wrapper
FormControlLabel -> Label with proper association
FormHelperText -> FormMessage for errors/help
Checkbox -> Checkbox with proper styling
Radio/RadioGroup -> RadioGroup with RadioGroupItem
Switch -> Switch component
Select -> Select with SelectContent/SelectItem
Autocomplete -> Combobox with Command

Testing Requirements

• Form validation testing
• Accessibility testing
• Integration testing with form libraries
• Visual regression testing

Documentation

• Form component usage guide
• Validation patterns
• Accessibility guidelines