'Form elements do not have associated labels, but it is a MUI theme switch [closed]

I have a theme switch (light to dark) on my page, using Material UI switch. I get an error from lighthouse stating that it needs a label, but if I make a text label it will impact the design and make it worse. Are there any solutions to this?

Also, here is the error from Lighthouse

Solution 1:^[1]

Add an aria-label to the Switch:

<Switch
  checked = {checked}
  onChange = {handleChange}
  inputProps = {{ 'aria-label': 'theme' }}
/>

You may use other attributes in inputProps as well (e.g. aria-labelledby, title).

One of the categories Lighthouse checks for is Accessibility. When certain elements like your Switch do not have an accessible name, an aria-label may be used to provide the element with an accessible name.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	pez

'Form elements do not have associated labels, but it is a MUI theme switch [closed]

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]