Internal QA/reference page for the canonical LAGO form element system. Every example uses the real production DS-007 components. Not linked from any product navigation.
DS-007 LagoFormElements — the foundational form component system for Lago management workflows.
Standardize data entry and selection patterns across Lago management workflows.
No page-specific input styling. All forms consume LagoFormElements and shared semantic tokens.
Inputs
Selection
Supporting
required).DS-001 Button (submit actions) · DS-002 Iconography (Lucide) · LAGO semantic colour/typography/spacing tokens.
LagoInput shared by Text, Email, Number, and Password. 40px height, 12px radius, 1px semantic border, visible teal focus ring.
Default
Filled
Focus (autoFocus)
Disabled
Error
Success
Enter the public-facing name.
Name is required.
Name looks good.
Required for publication.
Default
Filled
Disabled
Error
Success
Default
Filled
Disabled
Error
Success
Password type exposes an optional visibility toggle using DS-002 Lucide iconography.
Default
Filled
Disabled
Error
Success
Text lg
Email lg
Password lg
Search uses the same LagoInput geometry and focus treatment as text inputs, with a leading Lucide search icon.
Default
Populated
Focus (autoFocus)
Disabled
Error
Search by title, region, or category.
Same visual language as LagoInput (12px radius, 1px border, teal focus ring) with a larger content area. min-h-96px.
Default
Populated
Focus (autoFocus)
Disabled
Error
Success
Tell customers what makes this experience special.
Description must be at least 20 characters.
Description looks great.
Minimum 20 characters.
Textarea wraps by default. Vertical resize is enabled by the browser. Verify no horizontal overflow on narrow viewports.
Radix-based select. Same control geometry as LagoInput — 40px height, 12px radius, 1px border, teal focus ring. Lucide chevron + check icons.
Default (placeholder)
Selected
Disabled
Error
Success
Click any select to see the dropdown content, item focus, and check indicator. The dropdown uses shadow-elevation-md and rounded-lg.
Choose the primary category.
Please select a category.
Category saved.
Required for publication.
16px (h-4 w-4), 6px radius, Lucide check mark. Clear checked/unchecked/disabled/focus via border + fill — never colour alone.
Unchecked
Checked
Disabled unchecked
Disabled checked
Required to create an account.
You must accept the terms before submitting.
20px (h-5 w-5) circle, Lucide filled circle indicator. Native grouped semantics via Radix.
Unselected
Selected
Disabled unselected
Disabled selected
Choose how bookings are confirmed.
Please select a confirmation mode.
h-6 w-11 (44px) track, 20px thumb. Clear on/off via track colour + thumb position — never colour alone.
Off
On
Disabled off
Disabled on
Receive booking alerts by email.
Receive booking alerts by text message.
Skip manual review for instant bookings.
Approved treatments for labels, required indicators, help text, validation messages, success messages, and character counts.
Montserrat 14/20/600, LAGO text-primary.
Asterisk is a visual cue only — the actual required state is exposed natively via the `required` attribute on the control. Never colour alone.
Montserrat 14/22/400, LAGO text-secondary. Sits directly below its control.
Enter the public-facing name customers will see.
Montserrat 12/18/600, LAGO error token, paired with a Lucide AlertCircle icon — never colour alone.
Name is required. Please enter a value.
Montserrat 12/18/600, LAGO success token, paired with a Lucide CheckCircle2 icon. Only used where confirmation is meaningful.
Name saved successfully.
Montserrat 12/18/600, LAGO tertiary text. Deliberately subordinate to the label and validation message.
A realistic composed form showing required, invalid, valid, and disabled fields. Validation meaning is never communicated through colour alone — icons and text accompany every state.
Name is required.
Please enter a valid email address.
Capacity saved.
Optional — leave blank if unsure.
Description must be at least 20 characters.
All relevant production form controls shown disabled. Verify: visually distinct, text remains legible, interaction is actually disabled, no misleading focus state, semantics preserved.
Text
Search
Password
Checkbox unchecked
Checkbox checked
Switch off
Switch on
One realistic LAGO form using actual DS-007 production components. Verifies that individual controls work as a coherent form rather than isolated specimens.
Production components at 7 viewport widths. Check: label wrapping, input containment, textarea containment, select containment, validation-message wrapping, help-text wrapping, required indicators, control width, no horizontal overflow, touch usability, vertical rhythm.
1534px — Desktop
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
1024px — Desktop / Tablet boundary
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
768px — Tablet
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
430px — Mobile
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
390px — Mobile
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
375px — Mobile
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
320px — Mobile
Enter the public-facing name.
Find by title or region.
Description must be at least 20 characters.
Verify the accessibility behaviour built into the production DS-007 components.
LagoFormField wires label htmlFor to control id, and aria-describedby to help/error ids.
Enter the public-facing name.
The asterisk is visual only. The actual required state is exposed via the native required attribute on the control, wired by LagoFormField.
On error: control gets aria-invalid=true, and the error message is wired via aria-describedby. The AlertCircle icon reinforces the state beyond colour.
Please enter a valid email.
LagoRadioGroup uses Radix RadioGroup.Root with native grouped semantics. Each item is keyboard-navigable with Arrow keys.
LagoSwitch uses Radix Switch.Root with native switch role, keyboard toggle (Space), and aria-checked.
Disabled controls use the native disabled attribute — they are genuinely non-interactive and excluded from the tab order.
This field is locked.
All controls show a visible 2px teal focus ring (ring-lago-border-focus). Tab through the form above to verify.
Required: asterisk + native required. Error: red border + AlertCircle icon + text message + aria-invalid. Success: green border + CheckCircle2 icon + text message. Switch: track colour + thumb position. Checkbox: border + fill + check mark. None rely on colour alone.
Approved DS-007 principles and component inventory. No new design decisions are made here.
required).Production files
States
Approved use cases