Material UI TextField Custom Attribute

Question

I am currently trying to set a custom data attribute to a TextField component as such:

class TestTextField extends React.Component {
componentDidMount() {console.log(this._input)}
  render() {
    return (
      <TextField
        label="Label 1"
        InputProps={{placeholder: 'Input 1', 'data-state': 'Data State 1'}}
        margin="normal"
        inputRef={(elem) => {this._input = elem}}
      />
    )
  }
}

However I can't get data-state to show up with the console log saying

 <textarea rows="1" class="MuiTextarea-textarea-67 MuiInput-input-56 MuiInput-inputMultiline-64" placeholder="Input 1" type="text">

Are custom attributes not supported for TextField? I am using v1.0.0-beta.6 (https://material-ui-1dab0.firebaseapp.com/api/text-field/)

zeckdude · Accepted Answer · 2019-03-14 01:29:43Z

20

In case others didn't notice, @pier-paolo-ramon is saying to use the inputProps prop instead of the InputProps prop. Pay close attention to the case sensitivity.

<TextField
  inputProps={{placeholder: 'Input 1', 'data-state': 'Data State 1'}}
/>

answered Mar 14, 2019 at 1:29

zeckdude

16.3k45 gold badges150 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KD.S.T. Over a year ago

works fine to me

Pier Paolo Ramon · Accepted Answer · 2017-08-28 12:39:10Z

12

As you can see custom props are passed to the FormControl component. What you want is probably inputProps which is then passed down to the actual <input /> (InputComponent is "input" by default)

answered Aug 28, 2017 at 12:39

Pier Paolo Ramon

2,91927 silver badges27 bronze badges

1 Comment

Saravanan Over a year ago

I was like going crazy when i was not able to view the data attributes in markup, this post made it a piece of cake ..

Distagon · Accepted Answer · 2024-11-09 00:10:33Z

0

As of MUI 6, text input attributes are set as follows:

      <TextField
        slotProps={{
          htmlInput: { 'data-index': index },
        }}

answered Nov 9, 2024 at 0:10

Distagon

1,11412 silver badges14 bronze badges

Collectives™ on Stack Overflow

Material UI TextField Custom Attribute

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related