1.7 KiB

Raw Blame History

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

/* 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

1.7 KiB Raw Blame History