Material-ui: How to underline the TextField only if an error occurs ?

[ArthurAttout]

TextFields in v0.20.0 used to have an "ErrorText" property, which was very useful to display an error under a textfield and underline it in red at the same time.

<TextField
      hintText="Hint Text"
      errorText="This field is required"
      floatingLabelText="Floating Label Text"
/>

However, TextFields in material-ui@next don't have that property. In order to display an error and underline in red, a much more complex alternative is used

<FormControl className={classes.formControl} error aria-describedby="name-error-text">
          <InputLabel htmlFor="name-error">Name</InputLabel>
          <Input id="name-error" value={this.state.name} onChange={this.handleChange} />
          <FormHelperText id="name-error-text">Error</FormHelperText>
</FormControl>

Is this the only option ? Is there any other way to achieve it ?

[oliviertassinari]

@ArthurAttout You need to use the helperText property of the TextField.

[ras24]

@oliviertassinari I tried to use helperText property of the TextField to display an error. But, the error shown just normal color. I mean, how to show error with the red color?

[ArthurAttout]

@ras24 can you post your Textfield ? Mine worked perfectly

[ras24]

@ArthurAttout I tried using material-ui@next

  <TextField
       className={classes.textField}
       name='name'
       label='Name'
       placeholder='Type your name'
       value={this.state.name}
       onChange={this.onChange}
       helperText={this.state.error}
  />

If error occur, helperText just shown error messege with the gray color not a red color.

[JCofman]

@ras24 I think there should be an error boolean prop which you can set. Which changes the color of the helperText to red <TextField error />