bug: Input components with parent labels not working when disabled

[Patrick Munsey]

What version of daisyUI are you using?

4.7.3

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/UUcY4t1qbS

Describe your issue

When wrapping an input component with a label as seen in Text Input and checkbox. The styling is not working for when the input is in the disabled state.

I've had to re write the disabled behaviour for the checkbox using peer modifiers but can't get something working for the text input field. It would be good if you could provide an approach that didn't require re writing disabled behaviours when using parent or peer labels. Is this even possible?

What it looks like disabled when using a parent label ❌

What it looks like just styling the input component ✅

[github-actions]

Thank you @PatrickMunsey for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[Pouya Saadeghi]

I see. But it doesn't make sense if a disabled input applies style to the parent.
The parent label is visually an input and that's it. To make the label with input class look disabled, you can add input-disabled class to it as well.

Let me know if you have any questions

[Patrick Munsey]

Hi @saadeghi ,

The specific use case I was trying to fulfill was input with text label inside while disabled. The code snippet suggested adding input input-bordered to the parent label instead of the input which lost the disabled hover styling of the entire input field when disabled.

I followed your suggestion of adding input-disabled to the input elements className which worked but this forced the disabled state so I'll have have to re add disabled logic using something like cva(). I'm wondering if this can be done automatically through the input class styling like the default behaviour when styling a single standalone input element?

Example of inside text labels from daisyUI docs

    <label className="input input-bordered flex items-center gap-2">
      <input type="text" className="grow" placeholder="Search" disabled/>
      <kbd className="kbd kbd-sm">⌘</kbd>
      <kbd className="kbd kbd-sm">K</kbd>
    </label>

Adding input-disabled to input forced disabled state with hover working

    <label className="input input-bordered flex items-center gap-2">
      <input type="text" className="grow input-disabled" placeholder="Search" disabled/>
      <kbd className="kbd kbd-sm">⌘</kbd>
      <kbd className="kbd kbd-sm">K</kbd>
    </label>

[Pouya Saadeghi]

You can use [&:has(input[disabled])]:input-disabled class which applies input-disabled style if there is an input inside the current element with disabled attribute:
https://play.tailwindcss.com/PsrSKK3K13