When building forms in MUI, arranging fields for clarity and accessibility is essential. You use FormControl, FormLabel, and FormHelperText together to group inputs, provide clear labels, and offer guidance or feedback. For example, a simple form field for an email address might look like this:

import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import TextField from '@mui/material/TextField';
import FormHelperText from '@mui/material/FormHelperText';

<FormControl>
  <FormLabel htmlFor="email-input">Email address</FormLabel>
  <TextField id="email-input" type="email" aria-describedby="email-helper" />
  <FormHelperText id="email-helper">
    We'll never share your email.
  </FormHelperText>
</FormControl>

Here, FormControl groups the input and its label for accessibility, FormLabel provides a visible label, and FormHelperText gives extra information to the user.

To display validation errors, you can use the error prop and helper text. For instance, if a user enters an invalid email, you might show an error message like this:

<FormControl error>
  <FormLabel htmlFor="email-input">Email address</FormLabel>
  <TextField id="email-input" type="email" aria-describedby="email-helper" />
  <FormHelperText id="email-helper">
    Please enter a valid email address.
  </FormHelperText>
</FormControl>

The error prop on FormControl and the updated FormHelperText make the error state clear and accessible.

Integrating form validation logic with MUI components involves managing input state and error conditions in your React component. You typically track the value and validity of each field using state. When a user interacts with a field, you update the state and show or hide validation feedback using the error prop and FormHelperText. This ensures users receive immediate, accessible feedback and understand how to correct their input.