React Material UI OutlinedInput does not display error message

Question

Am using React and material UI to display an outlined input. I can make it display that there has been an error with the error prop set to true but there is an issue when i try to add helperText and my message as a prop:

<OutlinedInput
  margin="dense"
  value=""
  placeholder="my placeholder"
  error
  helperText="There has been an error" // Property 'helperText' does not exist on type 'IntrinsicAttributes & OutlinedInputProps'
/>

Is there any way to use both an OutlinedInput and display an error helper message?

score 13 · Answer 1 · answered Feb 25 '21 at 09:06

You can use FormHelperText component from @material-ui/core.

const [accountId, setAccountId] = useState({ value: "", error: "" });

<FormControl variant="outlined">
  <InputLabel htmlFor="accountId">Account Id</InputLabel>
  <OutlinedInput
    value={accountId.value}
    onChange={(e) => setAccountId({value: e.target.value, error:""})}
    inputProps={{
      "aria-label": "Account Id",
    }}
    labelWidth={74}
    error={!!accountId.error}
  />
  {!!accountId.error && (
    <FormHelperText error id="accountId-error">
      {accountId.error}
    </FormHelperText>
  )}
</FormControl>

score 5 · Accepted Answer · answered Jun 30 '20 at 09:17

You are using base input component which is being used by TextField internally. If you've some special requirement you can compose your own text field like given here. Otherwise use TextField with variant="outlined":

       <TextField
          margin="dense"
          value=""
          placeholder="my placeholder"
          error
          helperText="There has been an error"
          variant="outlined"
        />

score 0 · Answer 3 · answered Jun 30 '20 at 09:16

You can use <TextField/> with variant="outlined" Here is the CSB-Project Link

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "25ch"
    }
  }
}));

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        margin="dense"
        value=""
        placeholder="my placeholder"
        error
        helperText="There has been an error"
      />
    </form>
  );
}

React Material UI OutlinedInput does not display error message

3 Answers3