Toggle component does not permit adding a valid label?

[strlns]

Bug report 🐞

Version & Environment

• Version of browser: irrelevant, e.g. Firefox 111.01 on macos
• Version of geist-ui/core: 2.3.8

Expected Behaviour

The behavior I expected was:

The Toggle component should allow to either:

• wrap it in a HTML label + text content
• output its own children prop inside the <label> tag, maybe restricted to permitted content, e.g. text nodes or inline content
• associate it with a label using the for-attribute
• use a prop different from children to add label text

Actual results (or Errors)

The Toggle component uses an HTML Label tag, but there seems to be no possibility to add any text content. This is unfortunate because it makes it impossible to use semantically correct HTML with the toggle element.

Nesting the Toggle component in a label thus leads to two nested label tags, which is invalid.

Luckily, browser DOM allows this, which avoids react hydration issues because of the nested label tags. Still, it seems ugly and is not valid HTML AFAIK.

Using the for-attribute correctly seems possible 💡 as the component exposes a ForwardedRef on the input element.

But 🤔
There is still the label wrapper then, which still makes the resulting HTML semantically wrong I think.

Also, I'd need to imperatively set an ID on the ref then to use it with the other associated label.