Revision history [back]

One solution is to use the "aria-label" attribute, which adds a descriptive label for screen readers and other assistive technologies without visibly displaying the label on the form.

For example, in MUI TextField, you can add the "aria-label" attribute like this:

<TextField
  id="my-input"
  inputProps={{ 'aria-label': 'My Label'}}
/>

In this code, the label "My Label" will be read by screen readers and other assistive technologies, but it won't be visually displayed on the form.

Another solution is to use the "sr-only" class, which is a commonly used CSS class that visually hides an element while still making it accessible to screen readers and other assistive technologies.

For example, in MUI TextField, you can add the "sr-only" class like this:

<TextField
  id="my-input"
  InputLabelProps={{ className: 'sr-only' }}
/>

In this code, the label will be hidden from view using the "sr-only" class, but it will still be read by screen readers and other assistive technologies.

Both solutions allow you to conceal the label in MUI TextField while still maintaining support for accessibility and testing.