TextInput should have more prominent disabled styles + required validation error still shows up

[davinotdavid]

Describe the bug
TextInput disabled styles are almost indistinguishable from the normal styles (except for the cursor on hover). I believe it should have more of a visual difference (cc @laurelterlesky) as at least I can't tell that they are disabled.

Secondly and perhaps more importantly, if the TextInput is required, gets validated and later on disabled, the error message still shows up but it should be cleaned up.

To Reproduce
Steps to reproduce the behavior:

1. Mount the TextInput with the required prop and make the disabled prop be a ref somewhere else that can be toggled (more on the video below)
2. Click on the TextInput and click away (hence triggering the empty validation)
3. Click on the another component (a checkbox for example) that flips the disabled prop to true
4. See that the error message is still shown

Expected behavior
The error message should be cleared and one should be able to visually distinguish disabled / enabled TextInputs.

Screen.Recording.2025-11-24.at.3.38.16.PM.mov

[devmount]

@davinotdavid cc @laurelterlesky I asked design about this on Figma.

[laurelterlesky]

Hi, I'll have a closer look at this today. We really should be using disabled component only when they are absolutely necessary to show context - otherwise they are just bad UX. I see an issue here with the UX solve in the example and then a few things to clean up in the component. Will get back to you with solves shortly.

[laurelterlesky]

Will look at the disabled web inputs later. But for now, in the flow that you posted for FTUE in Appointment, if the user selects that this calendar doesn't requires a login, we shouldn't show the inputs below.

Recommendation is that the box is unchecked by default (@Jesse-Moz to confirm)