search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
58.6k stars 3.2k forks source link

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

Closed Krymancer closed 2 weeks ago

Krymancer commented 2 weeks ago

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

Krymancer commented 2 weeks ago

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