Functions

The FormGroup component provides a structured way to group related form controls together. It ensures consistent spacing, alignment, and layout for multiple checkboxes or switches in a form.

Vertical Layout

By default, FormGroup stacks its children vertically, which is ideal for longer lists of options where each item needs its own line for clarity.

Horizontal Layout

Use the row prop to arrange form controls horizontally. This is useful when options are short and can fit side by side without crowding.

With Switches

FormGroup works equally well with Switch components, making it ideal for settings panels and preference toggles.

Best Practices

When to Use FormGroup

• Use when grouping two or more related checkboxes or switches
• Wrap inside a FormControl with a FormLabel for proper accessibility
• Use row prop for short option labels that fit horizontally
• Prefer vertical layout for longer labels or more than four options

Common Patterns

• Always pair with FormControlLabel to provide descriptive labels
• Use FormLabel as a group heading for screen reader support
• Keep option labels concise and scannable
• Use consistent control types within a single FormGroup (all checkboxes or all switches)

Accessibility

• Wrap FormGroup in a FormControl with component="fieldset"
• Always include a FormLabel with component="legend" for screen readers
• Ensure each control has a descriptive label via FormControlLabel
• Supports full keyboard navigation out of the box

Customization

FormGroup can be customized through props and styling to match your design requirements.

Props

• children: The form controls to be grouped (e.g., FormControlLabel with Checkbox or Switch)
• row: If true, the group is displayed in a horizontal row instead of a column
• sx: Custom styling using the theme system
• classes: Override or extend the styles applied to the component