Form System
The unified form system for BrightAI — every input resolves to
.input + a variant (text, email, textarea, select,
checkbox, radio, file) + a size (sm 36 / md 44 / lg 52). All
controls share the same focus state (brand border + 3px tinted
ring) and the same error pattern (danger border + helper text).
Page is fully indexable (REPORTS-SEO-FOUNDATION).
نظام الـ forms الموحّد في BrightAI. كل حقل يستخدم .input
كنقطة بداية. أحجام: sm 36px، md 44px (الافتراضي)، lg 52px.
الـ focus موحّد: brand border + 3px ring. الـ error موحّد:
danger border + helper text. الـ layout helpers:
.form-field + .form-row + .form-label + .form-helper + .form-error.
Base input
The foundation: .input alone gives you an accessible
text input. Background --bg-elevated, border
--border-default, focus → brand border + 3px ring.
Size ladder
Three sizes — sm 36px (compact in-row), md 44px (default, AAA), lg 52px (prominent forms). Height doubles as the tap target.
Input types
Native HTML5 input types — the same .input class
adapts to all of them. Type-specific validation runs on the
browser (no JS needed).
Textarea
Multi-line input with .input--textarea modifier.
Min-height 150px, vertical resize, relaxed line-height for
Arabic breathing room.
Select dropdown
Native select with custom SVG arrow (RTL-aware). Use
.input--select to swap the OS-default chrome.
Selection controls
Native checkboxes and radios styled with accent-color
(brand color, no JS, no SVG). Always wrap with a real
<label> for accessibility.
File input
Styled file picker with .input--file — the
::file-selector-button pseudo-element gets a
secondary-button look that matches the rest of the system.
Input states
Six states — default, hover, focus, disabled, readonly, error.
The error state uses --status-danger border + 3px
red-tinted ring + .form-error helper text.
Form layout helpers
Five canonical helpers: .form-field (wrapper),
.form-row (grid for 2+ inputs in a row),
.form-label, .form-helper,
.form-error. Stack vertically by default,
responsive grid on --2 modifier.
.form-field — wrapper (flex column, gap 8px)
.form-label — input label
.input — the control itself
.form-helper — hint text (muted, optional)
.form-error — error text (danger, optional)
form-row (2-column grid)
Complete form
Real-world example — the same pattern used in
/contact/. Stacks vertically on mobile, 2-column
on tablet+, submit button uses .inner-form__submit.
Legacy aliases
Old class names preserved for HTML compatibility. All aliases
resolve to the canonical .input + variant +
.form-field layout.
| Legacy class | Canonical | Status |
|---|---|---|
.field | .input | ✅ preserved (used in pages.css) |
.home-form-input | .input | ✅ preserved |
.inner-form__input | .input | ✅ preserved (contact form) |
.inner-form__textarea | .input.input--textarea | ✅ preserved |
.inner-form__select | .input.input--select | ✅ preserved |
.inner-form__group | .form-field | ✅ preserved |
.inner-form__label | .form-label | ✅ preserved |
.inner-form__submit | .btn.btn--primary | ✅ preserved (custom styling) |
.field-group | .form-field | ✅ preserved |
.field-label | .form-label | ✅ preserved |
.field-help | .form-helper | ✅ preserved |
.field-error | .form-error | ✅ preserved |
Aliases are kept indefinitely for HTML compatibility — they're
used in 30+ existing form elements across contact, demo, and
assessment pages. New code should use canonical names
(.input + .form-field).