Support :disabled pseudo-class in TCSS for choice widgets (RadioButton, Select, Checkbox)

[rubenxyz]

Problem

Widgets like RadioButton, Select, and Checkbox already support disabled=True at the Python level — the widget ignores clicks and keyboard events correctly. But there is no way to style disabled items differently via TCSS. The :disabled CSS pseudo-class used in web CSS (input:disabled { color: gray; }) has no equivalent in Textual CSS.

This means every app that wants to show "coming soon" or unavailable options in a choice list has to work around it manually — add custom classes, use custom widgets, or hack at color properties.

The result: disabled choices look identical to active ones, confusing users about what they can and cannot select.

Proposal

Add :disabled as a recognized pseudo-class in the TCSS parser and selector matcher. It would match any widget whose disabled property is truthy.

/* Gray out unavailable choices in a RadioSet */
RadioButton:disabled {
    color: $text-disabled;
    opacity: 60%;
}

/* Dim disabled Select options */
Select Option:disabled {
    color: $text-muted;
}

/* Style a disabled Checkbox label differently */
Checkbox:disabled > .toggle--label {
    color: $text-disabled;
}

Why this works

The plumbing is already there — Widget.disabled is a reactive attribute on the base class, and RadioButton, Select, Checkbox, Button, Input, and many others already honor it for event handling. The CSS engine just needs to expose it as a queryable pseudo-class, similar to how :focus and :hover already work today.

Real-world use case (studiolot)

We have an onboarding wizard with a RadioSet listing 8 AI providers. One is active (Replicate), and 7 are grayed-out as "coming soon" entries so users can see the roadmap. Without :disabled, we have to manually attach a .radio-disabled CSS class to each disabled RadioButton:

RadioButton(
    "Fal.ai",
    disabled=True,
    classes="radio-disabled",  # manual hack
)

With :disabled support, this becomes pure TCSS — no Python-level class management needed:

RadioButton("Fal.ai", disabled=True)  # clean

RadioButton:disabled { color: $text-disabled; }  # done

I would like to build this

Happy to submit a PR. The work would touch the TCSS parser (recognizing :disabled as a valid pseudo-class) and the selector matcher (checking self.disabled during widget matching). I will need a pointer on where in the Textual codebase the pseudo-class dispatch lives, but I am ready to do the implementation.

[willmcgugan]

https://github.com/search?q=repo%3ATextualize%2Ftextual%20%3Adisabled&type=code