Skip to main content

Forms

Forms are where a system earns its keep, because they are where consistency and accessibility matter most and slip most easily. Prism treats a form as a composition of a few orchestration pieces rather than a pile of inputs.

The pieces

  • Field wraps a control with its label, help text and error, wired together so the label is clickable and the error is announced.
  • FormSection and FormRow group related fields and lay them out at the right rhythm for the current density.
  • ErrorSummary collects validation failures at the top of a long form and links each to its field — the single biggest help for keyboard and screen-reader users.
  • FormActions pins the primary and secondary actions consistently.
  • AutosaveIndicator communicates save state without a modal.
  • MultiStepForm sequences a long task into steps with a visible Stepper.
Live demo
Open ↗

Rules

  • Every input has a visible, persistent label. Placeholder text is not a label.
  • Validate on submit and on blur, not on every keystroke. Show the error next to the field and in the summary.
  • One primary action per form. Destructive actions are never the default button.
  • Group long forms into sections or steps; a wall of inputs is a usability problem, not a layout one.

Inputs

The full set of inputs — text, select, checkbox, radio, switch, number, search, range, combobox — lives under Forms & inputs. Each handles its own states (focus, disabled, invalid) so you compose, not re-style.

Live demo
Open ↗