CODEWITHSUNDEEP
reactjsmaterial-ui
Metarat
Metarat

Reputation: 639

Material-UI: How to apply input attributes using TextField

I have a couple of input fields (TextField) that I would like to add some aria-* attributes for accessibility.

I am trying this way:

const props = {
  InputProps: {
    'aria-label': 'myAriaLabel'
  }
}

// ...

<TextField {...props}></TextField>

But Material-UI ends up applying the attribute to the wrapping div that is generated. Something like:

<div aria-label="myAriaLabel"><input /></div>

How can I place this attribute correctly to the input element?

Upvotes: 7

Views: 8070

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80986

You just need a lowercase i.

InputProps are for the Input component. inputProps are for the input element.

https://material-ui.com/api/text-field/#props

Upvotes: 22

Related Questions