shadcn-ui/ui

[bug]: Checkbox peer-active don't work

Krymancer opened this issue · 1 comments

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

I was able to solve using peer-data-[state=checked]:line-through