bug: Input components with parent labels not working when disabled
PatrickMunsey opened this issue ยท 4 comments
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 โ
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.
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
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>
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