How can I show autocomplete errors

user_12756076 0
Viewed 8911

I'm working with React Hook Forms.

<Controller
  control={control}
  rules={{ required: "Required" }}
  error={errors.state ? true : false}
  helperText={errors.state && errors.state.message}
  name="state"
  as={
    <AutoComplete
      options={stateOptions}
      onChange={selectStateHandler}
      label="State"
      value={selectedState}
    />
  }
/>

helper text is working with TextField but not with Autocomplete. TextField border color changes on error, I want same with Autocomplete.

react-hook-form material-ui reactjs controller forms
1 Answers

Autocomplete render input using TextField, so you just have to do the same with text field to show error

<Autocomplete
  ...
  renderInput={(params) => (
    <TextField
      error={true}
      helperText="Example error"
      {...params}
      label="Combo box"
      variant="outlined"
    />
  ...
  )}
/>

Below is the preview codesandbox

Edit Material demo

user_66551600
Related