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 & Examples

Default

Vertical

Horizontal

default.tsx

<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 API

Form Group props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Optional override for the wrapper aria-describedby.
`aria-label`	`string`	No	aria	`—`	Optional aria-label for the wrapper group.
`aria-labelledby`	`string`	No	aria	`—`	Optional override for the wrapper aria-labelledby.
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ReactElement<unknown, string \| JSXElementConstructor<...>>[]`	Yes	props	`—`	The form element or component (input, textarea, etc.).
`className`	`string`	No	styling	`—`	Additional class names for styling.
`controller`	`ReactNode`	No	props	`—`	Optional controller element (e.g., button, icon) beside input.
`controllerClassName`	`string`	No	props	`—`	Additional class names for the optional controller wrapper.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`description`	`string`	No	props	`—`	Optional helper text displayed below the input.
`descriptionClassName`	`string`	No	props	`—`	Additional class names for the helper description.
`error`	`string`	No	props	`—`	Optional error message shown below the input.
`errorMessageClassName`	`string`	No	props	`—`	Additional class names for the error message.