Skip to main content

Form Group

Pattern
Live

The Form Group pattern is a consistent layout to show the relationship between form fields and labels.

Code

Usage​

Form Group provides a consistent and accessible layout for grouping form related components together. It handles the styling and positioning of labels, form controls, help text, error messages, and help links. This ensures they meet accessibility requirements and provide a consistent user experience.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { FormGroup } from "@iag/chroma-react-ui.components";

When to use​

Use Form Group whenever you need to combine a form component with other components, such as label, legend, message, help text etc. Use especially when there are multiple form components on the same page, or creating multi-step forms to ensure a consistent layout.

When to avoid​

Avoid using Form Group for non-form related content.

Do

  • Do include all the form related elements within the Form Group.

References​