Standardize checkboxes to use MUI Checkbox component #35

New Issue

egullickson · 2026-01-15T02:57:16Z

egullickson commented

2026-01-15 02:57:16 +00:00

Summary

Checkbox styling is inconsistent across the application. Some forms use raw HTML <input type="checkbox"> with Tailwind styling, while others use MUI <Checkbox> components. This creates visual inconsistency and breaks theme integration.

Problem

Three locations use non-standard raw HTML checkboxes:

File	Line	Context
`frontend/src/features/documents/components/DocumentForm.tsx`	360	"Scan for Maintenance Schedule" checkbox
`frontend/src/features/vehicles/components/VehicleForm.tsx`	954	"tcoEnabled" checkbox
`frontend/src/features/auth/components/SignupForm.tsx`	148	Terms acceptance checkbox

These use <input type="checkbox"> with manual Tailwind classes, while admin tables and maintenance forms correctly use MUI <Checkbox> with <FormControlLabel>.

Solution

Replace raw HTML checkboxes with MUI <Checkbox> wrapped in <FormControlLabel>:

// Before (non-standard)
<input
  type="checkbox"
  checked={value}
  onChange={(e) => setValue(e.target.checked)}
  className="w-5 h-5 rounded border-slate-300..."
/>

// After (standard)
<FormControlLabel
  control={
    <Checkbox
      checked={value}
      onChange={(e) => setValue(e.target.checked)}
      color="primary"
    />
  }
  label="Label text"
/>

Requirements

Use MUI <Checkbox> component with color="primary" to match red theme
Wrap in <FormControlLabel> for proper label association and accessibility
Preserve existing functionality (disabled states, onChange handlers)
Ensure mobile-responsive touch targets (min 44px)

Acceptance Criteria

DocumentForm.tsx checkbox uses MUI Checkbox
VehicleForm.tsx checkbox uses MUI Checkbox
SignupForm.tsx checkbox uses MUI Checkbox
All checkboxes display with primary (red) color theme
Disabled states render correctly
Mobile touch targets are adequate
Lint and type-check pass

## Summary Checkbox styling is inconsistent across the application. Some forms use raw HTML `<input type="checkbox">` with Tailwind styling, while others use MUI `<Checkbox>` components. This creates visual inconsistency and breaks theme integration. ## Problem Three locations use non-standard raw HTML checkboxes: | File | Line | Context | |------|------|---------| | `frontend/src/features/documents/components/DocumentForm.tsx` | 360 | "Scan for Maintenance Schedule" checkbox | | `frontend/src/features/vehicles/components/VehicleForm.tsx` | 954 | "tcoEnabled" checkbox | | `frontend/src/features/auth/components/SignupForm.tsx` | 148 | Terms acceptance checkbox | These use `<input type="checkbox">` with manual Tailwind classes, while admin tables and maintenance forms correctly use MUI `<Checkbox>` with `<FormControlLabel>`. ## Solution Replace raw HTML checkboxes with MUI `<Checkbox>` wrapped in `<FormControlLabel>`: ```tsx // Before (non-standard) <input type="checkbox" checked={value} onChange={(e) => setValue(e.target.checked)} className="w-5 h-5 rounded border-slate-300..." /> // After (standard) <FormControlLabel control={ <Checkbox checked={value} onChange={(e) => setValue(e.target.checked)} color="primary" /> } label="Label text" /> ``` ## Requirements - Use MUI `<Checkbox>` component with `color="primary"` to match red theme - Wrap in `<FormControlLabel>` for proper label association and accessibility - Preserve existing functionality (disabled states, onChange handlers) - Ensure mobile-responsive touch targets (min 44px) ## Acceptance Criteria - [ ] `DocumentForm.tsx` checkbox uses MUI Checkbox - [ ] `VehicleForm.tsx` checkbox uses MUI Checkbox - [ ] `SignupForm.tsx` checkbox uses MUI Checkbox - [ ] All checkboxes display with primary (red) color theme - [ ] Disabled states render correctly - [ ] Mobile touch targets are adequate - [ ] Lint and type-check pass

egullickson added the

labels 2026-01-15 02:57:59 +00:00

egullickson referenced this issue from a commit

2026-01-15 03:01:11 +00:00

fix: standardize checkboxes to use MUI Checkbox component (refs #35)

egullickson referenced a pull request that will close this issue

2026-01-15 03:01:20 +00:00

fix: Standardize checkboxes to use MUI Checkbox component (#35) #36