Collecting user input is a fundamental part of building interactive applications. MUI provides powerful components to handle form input, starting with the versatile TextField for text entry and the Select component for dropdown choices. You will often use these components to capture information from users in a consistent and visually appealing way.

To collect a single line of input, such as a name or email address, you can use the TextField component. The TextField also supports multi-line input, which is useful for comments or descriptions. Here is how you might use both single-line and multi-line variants:

Single-line TextField:

<TextField
  label="First Name"
  variant="outlined"
  value={firstName}
  onChange={e => setFirstName(e.target.value)}
/>

Multi-line TextField:

<TextField
  label="Comment"
  variant="outlined"
  multiline
  rows={4}
  value={comment}
  onChange={e => setComment(e.target.value)}
/>

In each case, the value prop is tied to a piece of React state, and the onChange handler updates that state as the user types.

When you need to present a set of predefined options, the Select component is the best choice. This component displays a dropdown menu, allowing users to pick one value from a list. Here's an example of how you might use Select to let a user choose a country:

<FormControl variant="outlined">
  <InputLabel id="country-label">Country</InputLabel>
  <Select
    labelId="country-label"
    value={country}
    onChange={e => setCountry(e.target.value)}
    label="Country"
  >
    <MenuItem value="us">United States</MenuItem>
    <MenuItem value="ca">Canada</MenuItem>
    <MenuItem value="mx">Mexico</MenuItem>
  </Select>
</FormControl>

This approach ensures the selected value is managed by React state, making it easy to access or update elsewhere in your application.

In React, input components become controlled when their values are managed by state. This means the displayed value of the input is always determined by a React state variable. For both TextField and Select, you provide a value prop linked to state, and update that state with an onChange handler. This pattern keeps your UI in sync with your data, and makes form validation and submission straightforward. Controlled inputs are a best practice in React because they allow you to fully control the user experience and respond to changes immediately.