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={(nextValue) => setValue(nextValue)} />
</FormGroup>
<FormGroup label="Horizontal" id="layout-horizontal" layout="horizontal">
  <TextInput value={value} onChange={(nextValue) => setValue(nextValue)} />
</FormGroup>

Props

Data table
	Type	Description
aria-describedby	string	Optional override for the wrapper aria-describedby.
aria-label	string	Optional aria-label for the wrapper group.
aria-labelledby	string	Optional override for the wrapper aria-labelledby.
children	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ReactElement<unknown, string \| JSXElementConstructor<...>>[]	The form element or component (input, textarea, etc.).
className	string	Additional class names for styling.
controller	ReactNode	Optional controller element (e.g., button, icon) beside input.
data-testid	string	Optional test ID for testing frameworks.
description	string	Optional helper text displayed below the input.
error	string	Optional error message shown below the input.
hideLabel	boolean	If true, visually hides the label but keeps it accessible.
id	string	Unique ID for the input and label association.
label	string	Label for the input field.
layout	"horizontal" \| "vertical"	Layout style for label and input. "vertical" (default) or "horizontal"
required	boolean	Whether the field is required (adds asterisk).
role	AriaRole	Optional role for the wrapper. Defaults to "group".
spacing	SizeType	Spacing size between each input in the form group. ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl')