CODEWITHSUNDEEP
javascriptcssreactjsfrontendmaterial-ui
Kusal Kithmal
Kusal Kithmal

Reputation: 1313

How to make a 'Select' component as required in Material UI (React JS)

I want to display like an error with red color unless there is a selected option. Is there any way to do it.

Upvotes: 25

Views: 60889

Answers (3)

Normal
Normal

Reputation: 3626

The required prop only works when you wrap your elements inside a <form> element, and you used the submit event to submit the form.

  • this is not related to react, this is pure HTML.

In MUI v5 (2022), it works like this:

const handleSubmit = (e)=>{
  e.preventDefault()
  // ...
}
return (
  <form onSubmit={handleSubmit}>
   <Select required value={val} onChange={handleChange} required>
    <MenuItem value="yes">Yes</MenuItem>
    <MenuItem value="no">No</MenuItem>
   </Select>
   <Button type="submit">Submit</Button>
  </form>
)

As you can see, it works the same way you think it should work, so what your code should probably be similar to this. But the required prop only works when you wrap your elements inside a element, and you used the submit event to submit the form.

And if you're using <FormControl>, but the required prop on both elements:

<FormControl required>
  <Select required>
    // ...
</FormControl>

Upvotes: 0

Kodin
Kodin

Reputation: 812

Material UI has other types of Select(native) also where you can just use plain HTML required attribute to mark the element as required.

<FormControl className={classes.formControl} required>
  <InputLabel htmlFor="name">Name</InputLabel>
  <Select
    native
    required
    value={this.state.name}
    onChange={this.handleChange}
    inputProps={{
      name: 'name',
      id: 'name'
    }}
  >
    <option value="" />
    <option value={"lala"}>lala</option>
    <option value={"lolo"}>lolo</option>
  </Select>
</FormControl>

P.S. https://material-ui.com/demos/selects/#native-select

Upvotes: 3

Jee Mok
Jee Mok

Reputation: 6556

For setting a required Select field with Material UI, you can do:

class SimpleSelect extends React.PureComponent {
  state = {
    selected: null,
    hasError: false
  }

  handleChange(value) {
    this.setState({ selected: value });
  }

  handleClick() {
    this.setState(state => ({ hasError: !state.selected }));
  }

  render() {
    const { classes } = this.props;
    const { selected, hasError } = this.state;

    return (
      <form className={classes.root} autoComplete="off">
        <FormControl className={classes.formControl} error={hasError}>
          <InputLabel htmlFor="name">
            Name
          </InputLabel>
          <Select
            name="name"
            value={selected}
            onChange={event => this.handleChange(event.target.value)}
            input={<Input id="name" />}
          >
            <MenuItem value="hai">Hai</MenuItem>
            <MenuItem value="olivier">Olivier</MenuItem>
            <MenuItem value="kevin">Kevin</MenuItem>
          </Select>
          {hasError && <FormHelperText>This is required!</FormHelperText>}
        </FormControl>
        <button type="button" onClick={() => this.handleClick()}>
          Submit
        </button>
      </form>
    );
  }
}

Working Demo on CodeSandBox

Edit soanswer51605798

Upvotes: 25

Related Questions