Components
Form Controls
Logging must cost seconds, so Peri's forms are built from taps: chips, scales and multi-buttons first; free text last. Labels are persistent eyebrows — never placeholder-only.
Text input, live
Log Sleep (hours)
Category Name
Category name is required
| Property | Spec |
|---|---|
| Container | --bg2 fill · radius --r-inp (12) · 48px · optional leading icon |
| Value | Input style — 18/28 bold |
| Label | persistent 11px eyebrow above the field |
| Error | red border + red uppercase helper label · focus moves to the field |
ScaleBlock (1–5), live
Energy level
Cross-screen awareness
The “How You Feel” screen shows a “set via Log Sleep” badge on sleep quality if that field is already owned by Log Sleep for the day — the user can still edit. The sex-drive scale shows a one-time explanatory note on first tap. Field ownership keeps merges safe; the UI makes ownership visible.
The rest of the family
| Control | Spec / use |
|---|---|
| Search bar | pill · leading 🔍/green glyph · live filtering (“Search to add a tag…”) |
| Textarea | notes · --bg2 · radius 12 · prompting placeholder |
| Dropdown | input-styled + chevron · frequency: Daily / Twice daily / Weekly / Monthly / As needed / Other |
| Radio option | circular, green dot when selected · export scope (All / Current / Date range) |
| Date fields | paired start/end with calendar glyph · End Date hidden when “singular event” is on |
| Medication rows | Name + Dose + Frequency · “+ Add medication” repeats the block |
→Notes… (last resort)
The merge-safe save pattern
Every log screen owns a disjoint set of Entry fields and saves by spreading the existing entry first — so six screens write into one dated record without ever clobbering each other. The form layer mirrors the data model: six doors, one room.
Do
- ·Prefer chips and scales over free text
- ·Keep labels persistent above fields
- ·Validate inline with red border + helper label
- ·Preserve unrelated fields on save (spread the existing entry)
Don't
- ·Use placeholder-only labels
- ·Block saving on optional fields
- ·Add multi-step wizards — every log screen is one screen
- ·Let two screens write the same Entry field
Accessibility
- —Errors encode with color + text +
aria-invalid, and move focus to the field. - —Scale rows are radiogroups; each cell exposes its number and caption.
- —Search inputs announce result counts politely via
aria-live.