Form Group

The Form Group component helps to structure and manage form input elements by providing a label, description, error message, and additional controls.

Usage

Default

Vertical

Horizontal

<FormGroup label="Vertical" id="layout-vertical" layout="vertical">
  <TextInput value={value} onChange={(e) => setValue(e.target.value)} />
</FormGroup>
<FormGroup label="Horizontal" id="layout-horizontal" layout="horizontal">
  <TextInput value={value} onChange={(e) => setValue(e.target.value)} />
</FormGroup>

Props

Sortable data table
Prop	Type	Default	Description
label	string	-	Label for the form group. Required unless `hideLabel` is set.
description	string	-	Additional description or help text displayed below the inputs.
error	string	-	Error message to show below the inputs. If provided, shows in place of description.
id	string	-	Unique id for accessibility, used for ARIA labelling.
required	boolean	false	Marks the field as required, adds a visual indicator and aria-required.
layout	"vertical" \| "horizontal"	"vertical"	Layout direction of the label and children: vertical (default) or horizontal.
spacing	"xs" \| "small" \| "medium" \| "large" \| "xl"	"xs"	Spacing (gap) between children inside the group.
hideLabel	boolean	false	Visually hides the label but keeps it accessible for screen readers.
controller	React.ReactNode	-	JSX element rendered beside the first input (e.g., button, icon).
children	React.ReactNode	-	Inputs or elements to render inside the form group.
className	string	-	Custom CSS class for the wrapper.
data-testid	string	"form-group"	Custom test id for the root element.