# Story 9.5: Component Styling - Forms

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **consistent, accessible form styling**,
So that **data entry is intuitive and error states are clear**.

## Acceptance Criteria

### Input Fields
- [ ] Border: Charcoal Gray
- [ ] Focus: Gold border
- [ ] Border-radius: 6px
- [ ] Padding: 12px 16px

### Textareas
- [ ] Same styling as inputs
- [ ] Minimum height: 120px

### Select Dropdowns
- [ ] Custom styled (not native)
- [ ] Consistent with inputs

### Checkboxes & Radios
- [ ] Custom styled with gold accent
- [ ] Clear checked state

### Labels
- [ ] SemiBold weight
- [ ] Required indicator (*)

### Error States
- [ ] Red border
- [ ] Error message below field

### RTL Support
- [ ] All fields align correctly in RTL

## Technical Notes

```css
/* Form field styling */
.input-field {
  @apply w-full border border-charcoal/30 rounded-md px-4 py-3
         focus:border-gold focus:ring-2 focus:ring-gold/20
         transition-colors outline-none;
}

.input-error {
  @apply border-danger focus:border-danger focus:ring-danger/20;
}

.form-label {
  @apply block text-sm font-semibold text-charcoal mb-2;
}

.form-label-required::after {
  content: ' *';
  @apply text-danger;
}

.error-message {
  @apply text-sm text-danger mt-1;
}

/* Custom checkbox */
.checkbox-custom {
  @apply w-5 h-5 rounded border-charcoal/30 text-gold
         focus:ring-gold focus:ring-offset-0;
}
```

## Definition of Done
- [ ] Input styling consistent
- [ ] Textarea styling consistent
- [ ] Select styling works
- [ ] Checkbox/radio styled
- [ ] Error states clear
- [ ] RTL alignment correct
- [ ] Tests pass

## Estimation
**Complexity:** Medium | **Effort:** 3-4 hours