Form Elements
Form Field Group
Form field group is a container that organizes related input controls like text boxes, dropdowns and checkboxes into logical sections. It structures long, complex forms to improve the user experience and allows developers to apply styles, validation rules or visibility conditions to multiple fields at once.
Examples
Form title
Description
Field Group Heading
Description
Required fields are marked with asterisk*
Field 1
Field 2
Field 3
Field 4
Field 5
Field 6
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Groups related form elements for screen readers
- Provides consistent spacing between form components
- Error states communicated through visual and semantic means
- Required fields indicated visually and programmatically
- Disabled state prevents interaction and is announced
- Proper container semantics for form field composition
- Maintains focus order through logical DOM structure
When to use this component
✓Do's
- •Wrapping form inputs with label and error
- •Consistent form field layout
- •Adding hint text to inputs
- •Required field indication
✗Don'ts
- •For standalone labels - use a Label component.
- •For content outside a form - use standard typography components.
- •For highly customized layouts - create a custom form structure.
- •For displaying read-only information - use a Description List.
Do's and Don'ts
✓ Do's
✓ Correct implementation shown
Always wrap inputs with Field for consistent label, hint, and error layout.
✗ Don'ts
✗ Incorrect implementation shown
Don't use standalone inputs without labels, it fails WCAG 1.3.1.