How to Make Select Component From Material UI a Required Input

Irakli Tchigladze Feb 02, 2024
  1. Select Component From Material UI in React
  2. How to Make Select Component From Material UI a Required Input in React
How to Make Select Component From Material UI a Required Input

Reusable components make it easy to build UIs in React. Material UI is one of the finest libraries that provide custom components to help you build visually appealing and functional UIs in React.

The library includes custom components for many different purposes. React developers usually don’t have time to create and style input components from scratch, so they import them from Material UI.

These custom components often have a standard look, but they have built-in props that offer many customization options. You can use them to customize the appearance and the functionality of custom input components.

This article will discuss one of the custom input components from Material UI.

Select Component From Material UI in React

This component is based on the input element of the same type in regular HTML. Select custom component allows you to give users multiple options to choose from.

The built-in props in the custom Select component give you the ability to create the elements tailored to the needs of your application.

For instance, you can give users the freedom to choose more than one option, customize the label, customize its color and do much more.

There are many possibilities for customization. Look at the official API documentation to get a better idea.

How to Make Select Component From Material UI a Required Input in React

Sometimes, you need to make the Select component a required input in developing React applications. This way, they have to select a value before moving on to the next step.

If the user decides to submit a form without selecting a value, the form won’t be submitted and will throw an error. This error can be a text below the select component, a popup, or a tooltip.

It is a common UX pattern to use a red color to specify something wrong.

Let’s look at a practical example.

export default function App() {
  const [error, setError] = useState(false);
  const [selectedValue, setSelectedValue] = useState(null);
  return (
    <form>
      <FormControl error={error} style={{ width: "200px" }}>
        <InputLabel htmlFor="age">Select Age</InputLabel>
        <Select
          name="age"
          value={selectedValue}
          onChange={(e) => setSelectedValue(e.target.value)}
        >
          <MenuItem value={10}>10</MenuItem>
          <MenuItem value={20}>20</MenuItem>
          <MenuItem value={30}>30</MenuItem>
        </Select>
        {error && <FormHelperText>Select a value</FormHelperText>}
      </FormControl>
      <br />
      <br />
      <button type="button" onClick={() => setError(!selectedValue)}>
        Submit
      </button>
    </form>
  );
}

There’s a lot to unpack here. Let’s start with two state values - error and selectedValue. We use the useState hook to create these variables and the functions that update them.

We update the value of the error variable to display (or hide) the error message conditionally. This value is set to a false Boolean value by default.

We use the selectedValue variable to store the value selected by the user. By default, we set this variable to null.

If the user hasn’t selected any value and tries to submit the form by clicking the button, the event handler will flip the default null value and set the error variable to true.

Then our form will display an error message.

We have also set up an onChange event listener. Whenever the user selects a value different from the current choice, the event listener will update the selectedValue variable.

You can try the live demo on codesandbox.

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

Related Article - React Component