CleenUI · Layout · FormGroup

FormGroup

Form-section wrapper providing label, help text, error display, and consistent spacing for related inputs.

storybook.cleenui.com
Open Storybook
Live preview

Interactive FormGroup preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About FormGroup

FormGroup is the section-level form primitive — one level up from individual input fields. It wraps a group of related inputs with a section title, help text, and section-level error/validation messaging.

Not strictly required around every input (the input components have their own label and error slots), but useful when grouping a logical cluster of fields — "Address", "Payment", "Contact preferences".

When to use it

  • Address forms (street, city, state, zip as one group).
  • Payment-information forms.
  • Settings panels organized by category.
  • Multi-section single-page forms.

Common props

Prop
Type
Description
label
string
Group title.
help
string
Optional help text under the title.
error
string
Group-level error message.
spacing
"compact" | "normal" | "relaxed"
Vertical spacing between child inputs.
collapsible
boolean
Allow the group to collapse.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.