Usage

Use FormControlLabel when you need to pair a form control with a descriptive label. This improves usability and ensures better alignment and interaction.

  • Supports control prop for checkboxes, radios, switches, etc.
  • Automatically positions the label to the right of the control by default.
  • Can be customized with positioning via labelPlacement prop.

With Checkbox

With Disabled Checkbox

With Radio Button

With Radio Button (Label on Left)

With Switch

Best Practices

Accessibility

Always use a visible and meaningful label. This ensures assistive technologies can identify the purpose of the control.

Label Positioning

Use the labelPlacement prop to customize where the label appears (top, bottom, start, end). Default is end.

Consistency

Use consistent label styles across forms to build visual trust and maintain usability. Do not use different positions for labels unless absolutely necessary.

Clear Language

Keep labels short, clear, and actionable. They should describe exactly what the control does.