Disabled states

[MartijnCuppens]

We should provide some basic theming for the :disabled state. Probably a color setting which will be applied as background.

[hacknug]

What about readonly?

[barryofguilder]

I've been messing with the disabled state for a checkbox and having a hard time to change the icon from white to a dark gray from my Tailwind theme. Hoping to see if someone else can figure that out.

[MartijnCuppens]

Colorizing the check will be harder indeed since it's actually a background-image.

Other than that: should we use a disabled state per component (which is more flexible but is harder to keep in sync between components) or do we use a global disabled background-color, ect (which will require to merge the disabled theming with the components here:)?

https://github.com/tailwindcss/custom-forms/blob/454ba00d5a54deac522b2d68884bf92391136636/src/index.js#L156-L161

[Koc]

As workaround we can define disabled state inside theme config

            default: {
                input: {
                    borderColor: theme('colors.grey.lighter'),
                    borderWidth: '1px',
                    borderRadius: undefined,
                    '&::placeholder': {
                        opacity: '1',
                    },
                    '&:hover': {
                        borderColor: theme('colors.grey.default'),
                        '&:focus': {
                            borderColor: theme('colors.grey.dark'),
                        },
                    },
                    '&:focus': {
                        outline: 'none',
                        boxShadow: undefined,
                        borderColor: theme('colors.grey.dark'),
                    },
                    '&:disabled': {
                        opacity: 0.4,
                    },
                },
            },

[pavelloz]

+1 ^

Config looks like a way to go.

I would say that opacity 0.4 isnt the best choice (especially for those with weaker-contrast screens). Kind of hard to see, when there is a value already, or checkbox is checked for example. I personally use grey bg color.

[lukepighetti]

Did anyone nail down an appropriate way forward for this? Not having a disabled state for checkboxes is kind of a bummer.

[adamwathan]

I'll likely be adding some default disabled styles in the next release but you can always just add utilities to make things feel disabled:

<input type="checkbox" class="form-checkbox opacity-50" disabled>

This is what I do currently on my own projects, never really been a painful problem.

[damisparks]

This is how I handled mine in Vue

<button
:disabled="!isFormValid"
:class="{ 'opacity-25 cursor-not-allowed': !isFormValid }"
type="submit"
class="text-white bg-primary font-semibold py-1 px-3 rounded"
>
 <span class="uppercase">Do something</span>
</button>

isFormValid() {
    // return your condition  
},

[richardthombs]

I'd like to be able to @apply disabled:text-gray-600 disabled:cursor-not-allowed please :)

[richardthombs]

Actually looking at the 2.0 documentation it seems that this is possible now, right?

[SandroMaglione]

Yes, :disabled is now available here. @adamwathan can this issue be closed?

[alexcroox]

The other missing key is disabled placeholder color. Not sure it's supported in tailwindcss as

variants: {
    extend: {
      placeholder: ['disabled']
    }
}

triggers TypeError: variantsValue is not iterable error.

Trying to do disabled:placeholder-gray-400

[mchev]

Yes, this is possible now (using 2.0) : disabled:opacity-25 disabled:cursor-not-allowed

But you must define the appropriate variants

    variants: {
        extend: {
            opacity: ['disabled'],
            cursor: ['disabled'],
        },
    },