Group Related Form Fields
Related form fields must be visually and semantically grouped — using section headings, helper text, and proximity — so users can comprehend field relationships and navigate the form without cognitive overload.
$ prime install @community/rule-group-related-form-fields Projection
Always in _index.xml · the agent never has to ask for this.
GroupRelatedFormFields [rule] v1.0.0
Related form fields must be visually and semantically grouped — using section headings, helper text, and proximity — so users can comprehend field relationships and navigate the form without cognitive overload.
Loaded when retrieval picks the atom as adjacent / supporting.
GroupRelatedFormFields [rule] v1.0.0
Related form fields must be visually and semantically grouped — using section headings, helper text, and proximity — so users can comprehend field relationships and navigate the form without cognitive overload.
Applies To
@community/type-html-artifact
Severity
warning
Patterns
- Personal Info section: name, email, phone
- Address section: street, city, state, zip (wrapped in fieldset)
- Payment section: card number, expiry, CVV (visually separated by a horizontal rule or card outline)
- Preferences section: checkboxes, radios
Behavior
- Use a visible heading (h2/h3) or legend to name each group.
- Add helper text beneath the group heading to explain its purpose when non-obvious.
- Use sufficient vertical space between groups (≥ 2× the within-group spacing) to signal boundaries.
- On mobile, consider collapsible sections for forms with 4+ groups to reduce scrolling.
Loaded when retrieval picks the atom as a focal / direct hit.
GroupRelatedFormFields [rule] v1.0.0
Related form fields must be visually and semantically grouped — using section headings, helper text, and proximity — so users can comprehend field relationships and navigate the form without cognitive overload.
Applies To
@community/type-html-artifact
Severity
warning
Patterns
- Personal Info section: name, email, phone
- Address section: street, city, state, zip (wrapped in fieldset)
- Payment section: card number, expiry, CVV (visually separated by a horizontal rule or card outline)
- Preferences section: checkboxes, radios
Behavior
- Use a visible heading (h2/h3) or legend to name each group.
- Add helper text beneath the group heading to explain its purpose when non-obvious.
- Use sufficient vertical space between groups (≥ 2× the within-group spacing) to signal boundaries.
- On mobile, consider collapsible sections for forms with 4+ groups to reduce scrolling.
Rationale
Grouping leverages Gestalt proximity and similarity: fields near each other with a shared heading are understood as related. Cognitive chunking reduces working-memory load when filling long forms.
Applies To
@community/type-html-artifact
Severity
warning
Patterns
- Personal Info section: name, email, phone
- Address section: street, city, state, zip (wrapped in fieldset)
- Payment section: card number, expiry, CVV (visually separated by a horizontal rule or card outline)
- Preferences section: checkboxes, radios
Behavior
- Use a visible heading (h2/h3) or legend to name each group.
- Add helper text beneath the group heading to explain its purpose when non-obvious.
- Use sufficient vertical space between groups (≥ 2× the within-group spacing) to signal boundaries.
- On mobile, consider collapsible sections for forms with 4+ groups to reduce scrolling.
Source
prime-system/examples/frontend-design/primes/compiled/@community/rule-group-related-form-fields/atom.yaml