Disabled Checkbox for React

Disable an option people should know exists but can't use right now: a feature on a higher plan, a choice that needs another one first, a setting that's locked. Hide it when it doesn't apply to them at all. Either way, say why nearby when it isn't obvious.

Start it checked and disable it, as the second row does. It reads as "this is on and can't be changed", for included features or requirements already met. Pass defaultChecked (or a controlled checked) together with disabled.

data-disabled on the Field dims its label to match the box. A faded box next to full-strength text looks like a bug; dimming the whole row says the entire option is unavailable.

Compute the disabled flag from your state and pass it on every render, for example when a parent option is off or a selection limit is reached. Put the same condition on the field's data-disabled, and add a line of helper text such as "Select up to 3" so people know why.

Screen readers announce them as dimmed or unavailable, along with their checked state, but keyboard users can't tab to them. If the reason matters, put it in text before the checkbox so it's read in order.

A disabled checkbox can't be focused and isn't submitted with the form. A read-only one stays focusable and submits its value, but can't be changed. Use read-only when a locked value still has to reach the server. Pass readOnly.