[bug]: Checkbox peer-active don't work
Krymancer opened this issue · 1 comments
Krymancer commented
Describe the bug
I'm writing a simple component for a project
The component consists in a checkbox and a label on one container. I want that the label text have a line through when the checkbox is checked.
I tried the following
<div className="flex gap-4 items-center">
<Checkbox id="checkbox" />
<label htmlFor="checkbox" className="peer-active:line-through">Checkbox</label>
</div>
For a brief moment the label is crossed but then return to the initial state, I also tried peer-checked
but doesn't do anything.
Affected component/components
Checkbox
How to reproduce
Click on the checkbox on the page
Codesandbox/StackBlitz link
https://stackblitz.com/edit/stackblitz-starters-a4mygo?file=app%2Fpage.tsx
Logs
No response
System Info
Windows 11 23H2
Node v21.7.3
pnpm 9.0.6
Before submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues
Krymancer commented
I was able to solve using peer-data-[state=checked]:line-through