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

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

25 props
Columns
Form Group props API
Default
Description
aria-describedbystringNoaria—Optional override for the wrapper aria-describedby.
aria-labelstringNoaria—Optional aria-label for the wrapper group.
aria-labelledbystringNoaria—Optional override for the wrapper aria-labelledby.
childrenReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<...>>[]Yesprops—The form element or component (input, textarea, etc.).
classNamestringNostyling—Additional class names for styling.
controllerReactNodeNoprops—Optional controller element (e.g., button, icon) beside input.
controllerClassNamestringNoprops—Additional class names for the optional controller wrapper.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
descriptionClassNamestringNoprops—Additional class names for the helper description.
errorMessagestringNoprops—Optional error message shown below the input.
errorMessageClassNamestringNoprops—Additional class names for the error message.
helperTextstringNoprops—Optional helper text displayed below the input.