[Checkbox] Not rendering "label" inside Popover

[mtnoronha]

I dont know why, but Checkbox component is not rendering the label component. I tried with normal html tag and it doesnt render as well <label>

I installed Checkbox via CLI and I'm using:

    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-label": "^2.0.2",

Here's the code:

    <Popover open={open} onOpenChange={setOpen} modal={true}>
      <PopoverTrigger asChild>
        <Button className="mb-4">
          <SearchIcon /> Status
        </Button>
      </PopoverTrigger>
      <PopoverContent className="bg-primary">
        <div className="flex flex-col gap-5">
          <Checkbox id="pending" className="bg-white">
            <label htmlFor="pending">Pendente</label>
          </Checkbox>
          <Checkbox id="overdue" className="bg-white">
            <Label>Vencido</Label>
          </Checkbox>
          <Checkbox id="paid" className="bg-white">
            <Label>Pago</Label>
          </Checkbox>
          <Button variant="secondary" className="mt-2" onClick={filter}>
            Aplicar
          </Button>
        </div>
      </PopoverContent>
    </Popover>

Proof:

[imopbuilder]

@mtnoronha

Here is the working Label

import { Label } from '@/components/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

export function PopoverDemo() {
	const [open, setOpen] = useState(false);

	return (
		<Popover open={open} onOpenChange={setOpen} modal={true}>
			<PopoverTrigger asChild>
				<Button className='mb-4'>
					<SearchIcon /> Status
				</Button>
			</PopoverTrigger>
			<PopoverContent className='bg-primary'>
				<div className='flex flex-col gap-5'>
					<div>
						<Checkbox id='pending' className='bg-white' />
						<label htmlFor='pending' className='text-background'>
							Pendente
						</label>
					</div>
					<div>
						<Checkbox id='overdue' className='bg-white' />
						<label htmlFor='overdue' className='text-background'>
							Vencido
						</label>
					</div>
					<div>
						<Checkbox id='paid' className='bg-white' />
						<Label htmlFor='paid' className='text-background'>
							Vencido
						</Label>
					</div>
					<Button variant='secondary' className='mt-2' onClick={() => console.log('click')}>
						Aplicar
					</Button>
				</div>
			</PopoverContent>
		</Popover>
	);
}

https://github.com/shadcn-ui/ui/assets/150527559/ca9d8508-e3eb-42b6-b6c0-8bd7d5c0bb13

[mtnoronha]

@imopbuilder hello man, how are you doing? Thank you for helping me.

You're right. The Label should not be inside the Checkbox component.