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?

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?

• javascript
• reactjs
• typescript
• material-ui

3 Answers 3

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>

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"
        />

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>
  );
}