kleradesign

forms

DESIGN.md
overview
foundations
forms
  • text input
  • email input
  • phone input
  • number input
  • textarea
  • date input
  • address
  • binary choice
  • single select
  • multi select
  • dropdown
  • acknowledgement
  • calculated value
  • split field row
  • step navigation
  • progress indicator
  • question group
dashboard
layout
patterns

canonical rules in kleraOS/DESIGN.md.

forms

every form-input pattern from onboarding, formalized. these currently live as *Draft components inside apps/public/onboarding/components/DesignLanguageCanvas.tsx; phase 2 extracts them into packages/ui/components/forms/and demos each one here.

  • text inputsingle-line text, the staple field.
  • email inputemail with built-in validation hooks.
  • phone inputus-formatted phone number.
  • number inputnumeric with optional unit suffix.
  • textareamulti-line, resizable.
  • date inputdate picker for dob, refill dates, etc.
  • addressstructured address — manual + google autocomplete.
  • binary choicetwo large buttons (yes/no, male/female).
  • single selectvertical stack of choices, one selected.
  • multi selectstack of choices, multiple selectable.
  • dropdowncompressed select with marquee overflow.
  • acknowledgementi-have-read row with fingerprint icon.
  • calculated valuecomputed result card (bmi, copay, etc).
  • split field rowtwo fields side-by-side (mm / yyyy, etc).
  • step navigationprimary + secondary buttons at footer.

klera design language · v0.1 · 22 components · registry at packages/ui/registry.json