Boolean element attributes (disabled, checked, etc.) in JSX

This is how I’ve been conditionally putting the disabled attribute on elements, with a boolean variable:

<input disabled={isDisabled} type=... />

When isDisabled is falsey, the attribute won’t be output. When true, it will output the following, which works in browsers but is against the HTML5 spec:

<input disabled="true" type=... />

I could get in line with the spec by setting disabled="disabled" on the element, but that requires a ternary operation instead of a simple boolean:

<input disabled={isDisabled ? "disabled" : false} ... />

Ideally, my current bit of JSX (at the top of this issue) would output this HTML, assuming disabled is set to true:

<input disabled type=... />

More generally, if a known boolean attribute gets assigned a variable set to true as in my example, JSX should output just the attribute as per the HTML5 spec.

[KarandikarMihir]

For those who are looking for work-arounds, for the time being, I found this on StackOverflow.

[gaearon]

This causes issues with css selectors depending on the checked selector.

You should not write CSS selectors like [checked]. This is just a wrong way to approach the problem. Browser doesn’t guarantee that attributes stay synced with properties.

In your example, instead of

input:not([checked]):disabled + label::after {

you should use :checked pseudoclass:

input:not(:checked):disabled + label::after {

Then it works with expected when toggled through JS (including React).