how to set helperText in react-select

Question

I am using react-select and TextField Material-UI . Is there possibility to set helperText (small text below component) in react-select like it is made in TextField ?

Thank You for help in advance.

PS I do not think my question is duplication of this question . The other post is about how to custom component which is a part of react-select, I want to add an option that react-select doesnt have.

Answer 1

TextField is mainly a convenience wrapper around several lower-level components including FormHelperText .

Here is the Autocomplete demo in the Material-UI documentation using react-select: https://material-ui.com/demos/autocomplete/#react-select

Here is a modified version of that demo using FormHelperText : https://codesandbox.io/s/rynvn8po5p

Here's the relevant snippet from that code:

          <Select
            classes={classes}
            styles={selectStyles}
            options={suggestions}
            components={components}
            value={this.state.single}
            onChange={this.handleChange("single")}
            placeholder="Search a country (start with a)"
            isClearable
          />
          <FormHelperText>Here's my helper text</FormHelperText>

The Material-UI demos for Select also show many examples of using FormHelperText without using TextField : https://material-ui.com/demos/selects/#simple-select

Here is the API documentation for FormHelperText : https://material-ui.com/api/form-helper-text/

Answer 2

Do you mean placeholder? I think You can set this way:

const MyComponent = () => (
  <Select placeholder="Select..." options={options} />
)

But if you want the same look why do you use controls from different libraries. I think you can use FormHelperText with Select from Material-Ui . So you might as well this select instead of react-select.

<FormControl className={classes.formControl}>
  <InputLabel shrink htmlFor="age-native-label-placeholder">
    Age
  </InputLabel>
  <NativeSelect
    value={this.state.age}
    onChange={this.handleChange('age')}
    input={<Input name="age" id="age-native-label-placeholder" />}
  >
    <option value="">None</option>
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
  <FormHelperText>Label + placeholder</FormHelperText>
</FormControl>