Styling and accessibility

Built-in styles load automatically. Change the accent picker and focus an input to try scoped CSS variables. The demo also sets a larger border radius.

Usage

:root {
  --erlform-primary: #0f766e;
  --erlform-radius: 12px;
}

CSS variables

.my-form {
  --erlform-primary: #0f766e;
  --erlform-primary-soft: #ccfbf1;
  --erlform-text: #172033;
  --erlform-muted: #64748b;
  --erlform-border: #dbe2ea;
  --erlform-border-strong: #cbd5e1;
  --erlform-surface: #ffffff;
  --erlform-surface-muted: #f8fafc;
  --erlform-danger: #dc2626;
  --erlform-radius: 8px;
  --erlform-control-height: 44px;
}

Apply my-form to your HTML form. Override the same variables in your application's dark-mode selector; there is no separate theme prop.

Sections have separate className, headerClassName, and contentClassName options. Array/record/tuple containers do not accept every single-input styling option.

Accessibility

Built-in inputs connect labels and description/error IDs and set invalid/required attributes where supported. Collapsible sections use details/summary; wizards mark the current step and use a live region.

Test your form with a keyboard and screen reader. Radio and checkbox groups do not apply all single-input states. Native controls do not generally forward handleBlur in 1.0.0; use a custom input that calls it when validation depends on blur or touched state.