Functions

The FormControl component provides essential context and styling for form inputs. It manages states like filled, focused, error, and required, ensuring consistent appearance and behavior across different form controls.

State Management

FormControl automatically detects and communicates the state of its child components to ensure proper styling and accessibility. It provides context for form validation and user interaction states.

Size Variants

FormControl supports different sizes to accommodate various design requirements and improve visual hierarchy in forms.

Layout Control

FormControl provides layout utilities like fullWidth to control the width of form inputs and ensure consistent spacing and alignment.

Best Practices

When to Use FormControl

  • Always wrap form inputs (Select, Input, etc.) with FormControl
  • Use when you need consistent form styling and behavior
  • Required for proper accessibility and form state management
  • Essential for form validation and error handling

Common Patterns

  • Use fullWidth for inputs that should span the full container width
  • Combine with InputLabel for proper labeling
  • Use required prop to indicate mandatory fields
  • Apply error state for validation feedback
  • Use disabled state when inputs should not be interactive

Accessibility

  • FormControl ensures proper ARIA attributes are applied
  • Provides context for screen readers about form states
  • Supports keyboard navigation and focus management
  • Automatically associates labels with form controls

Customization

FormControl can be customized through various props and styling options to match your design system requirements.

Props

  • children: The content of the component (e.g., InputLabel, Input, and FormHelperText)
  • classes: Override or extend the styles applied to the component
  • color: The color of the component ("primary" | "secondary" | "error" | "info" | "success" | "warning")
  • disabled: If true, the label, input, and helper text are displayed in a disabled state
  • error: If true, the label and input are displayed in an error state
  • focused: If true, the component is displayed in a focused state
  • fullWidth: Makes the form control take the full width of its container
  • hiddenLabel: If true, the label is hidden (used to increase density for FilledInput)
  • margin: Adjusts vertical spacing of this and contained components ("none" | "dense" | "normal")
  • required: If true, the label will indicate that the input is required
  • size: Controls the size of the form control ("small" | "medium")
  • sx: Custom styling using the theme system
  • variant: The variant to use ("outlined" | "filled" | "standard")