`Switch` thumb not disabled when enclosed in a `disabled` `<fieldset>`

Problem

Switch thumb not disabled when enclosed in a disabled <fieldset>.

Demo

Cause

All form fields (<input>, <button> etc.) inside a <fieldset> are disabled. This results in the wrapping <button>, representing the track, being disabled. However, the <span> representing the thumb is not, as it’s not considered a form field. Thus the Switch is still toggleable.

Workaround

Explicitly add disabled to <button>.

Solution

Not really sure what would be a clean solution of determining if enclosed in a (disabled) <fieldset>. Unfortunately the disabled property of the <button> is not set. Walking up the DOM is one way. Any other suggestions?

Anyway, I would assume the entire Switch to be disabled in this case.

[thisisclint21]

Any update about how to disabled a switch?

[RobinMalfait]

I’m going to try and implement a relatively easy fix inside Headless UI itself this Friday. I also saw that they answered on the React repo so maybe things will go quick enough. We’ll see.