Regen Form Design

Forms that hardcode text-gray-700 or bg-amber-50 break in dark mode. Use theme-aware classes instead.

Quick Reference: Theme-Aware Form Classes

Text Colors (use these, never hardcode grays/ambers)

Input Fields

Standard input override for dark-compatible forms:

// For forms on dark/themed backgrounds (glass panels, cards in dark mode)
const themedInput = "bg-input/30 text-foreground placeholder:text-muted-foreground/70 border-input focus-visible:border-ring focus-visible:ring-ring/50";

// For forms on explicit light backgrounds (rare - only when you force bg-white)
const lightInput = "bg-white text-[#1a472a] placeholder:text-[#1a472a]/50 border-input";

Containers and Panels

Labels

// Standard label - inherits from theme
<Label className="text-foreground font-medium">Field Name</Label>

// Description below label
<p className="text-sm text-muted-foreground">Helper text here</p>

Radio Groups and Checkboxes

// Radio label text must be readable
<Label htmlFor="option-id" className="font-normal text-foreground">
  Option text here
</Label>

// Question text above radio group
<p className="font-medium text-foreground">
  Your question here?
</p>

Buttons

Form Layout Standards

Spacing

• Between form sections: space-y-8
• Between fields within a section: space-y-4 or space-y-6
• Between label and input: space-y-2
• Between label and description: space-y-1
• Section padding: p-4 or p-6

Cards (multi-step forms)

<Card className="border-primary/30">
  <CardHeader>
    <CardTitle className="text-2xl text-foreground">Step Title</CardTitle>
    <CardDescription className="text-muted-foreground">
      Description text
    </CardDescription>
  </CardHeader>
  <CardContent className="space-y-6">
    {/* form fields */}
  </CardContent>
</Card>

Step Indicators

// Active step
"bg-primary text-primary-foreground"
// Completed step
"bg-primary/80 text-primary-foreground"
// Future step
"bg-muted text-muted-foreground"
// Step label
"text-xs text-muted-foreground mt-2"

Navigation Footer

<div className="flex gap-3 pt-6 border-t border-border">
  <Button variant="outline">
    <ArrowLeft className="w-4 h-4 mr-2" />
    Back
  </Button>
  <Button className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90">
    Continue
    <ArrowRight className="w-4 h-4 ml-2" />
  </Button>
</div>

Tables Inside Forms

<table className="w-full text-sm">
  <thead>
    <tr className="border-b border-border">
      <th className="text-left py-2 font-medium text-foreground">Column</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-border/50">
      <td className="py-3 text-muted-foreground">Secondary data</td>
      <td className="py-3 text-foreground">Primary data</td>
      <td className="py-3">
        <a className="text-primary hover:text-primary/80 underline">Link</a>
      </td>
    </tr>
  </tbody>
</table>

WCAG Contrast Minimums

All form elements must meet these ratios:

How to Check

Use the theme variables. If --foreground on --card passes (it does, by design), then text-foreground on bg-card is always safe. The danger is hardcoded colors that bypass the theme.

Common Mistakes

Existing Glass Panel Pattern (dark backgrounds)

From ProfileEditForm, the established pattern for forms on explicit dark/glass backgrounds:

const glassInput = "text-white placeholder:text-white/50 bg-white/10 border-white/20 focus-visible:border-[#7dd87d]/50";

Use this only when the form sits on an explicit dark panel (not a themed card). For themed cards, use the theme-aware classes above.

Checklist Before Shipping Any Form

1. Does every text element use theme-aware color classes?
2. Do info/warning boxes use bg-muted or bg-primary/10 instead of hardcoded colors?
3. Are placeholder colors at least text-muted-foreground/70?
4. Do table headers and cells use text-foreground / text-muted-foreground?
5. Do borders use border-border instead of hardcoded gray/amber?
6. Is the page background using theme --background (not forced light)?
7. Do radio/checkbox labels use text-foreground?
8. Are step indicators using theme primary/muted colors?
9. Does the form look good in BOTH light and dark mode?
10. Are all interactive elements (links, buttons) using theme primary color?