1
- import * as CheckboxPrimitive from "@radix -ui/react- checkbox" ;
1
+ import { Checkbox as CheckboxPrimitive } from "@base -ui-components /react/ checkbox" ;
2
2
import { CheckIcon } from "lucide-react" ;
3
- import { forwardRef , useId } from "react" ;
4
3
import { cn } from "../../lib/utils.js" ;
5
4
6
- const Checkbox = forwardRef <
7
- React . ComponentRef < typeof CheckboxPrimitive . Root > ,
8
- React . ComponentPropsWithoutRef < typeof CheckboxPrimitive . Root >
9
- > ( ( { className, id, children, ...props } , ref ) => {
10
- const autoId = useId ( ) ;
11
- id = id || autoId ;
5
+ export type CheckboxProps = CheckboxPrimitive . Root . Props ;
12
6
7
+ const Checkbox = ( { className, children, ...props } : CheckboxProps ) => {
13
8
return (
14
- < div className = "flex items-center text-gray-dark" >
9
+ // biome-ignore lint/a11y/noLabelWithoutControl: The CheckboxPrimitive.Root is the control
10
+ < label className = "flex items-center text-gray-dark" >
15
11
< CheckboxPrimitive . Root
16
12
className = { cn (
17
13
`
@@ -28,19 +24,15 @@ const Checkbox = forwardRef<
28
24
` ,
29
25
className ,
30
26
) }
31
- id = { id }
32
27
{ ...props }
33
28
>
34
29
< CheckboxPrimitive . Indicator >
35
30
< CheckIcon className = "size-5" />
36
31
</ CheckboxPrimitive . Indicator >
37
32
</ CheckboxPrimitive . Root >
38
- < label className = "pl-2 text-sm leading-none" htmlFor = { id } >
39
- { children }
40
- </ label >
41
- </ div >
33
+ < span className = "pl-2 text-sm leading-none" > { children } </ span >
34
+ </ label >
42
35
) ;
43
- } ) ;
44
- Checkbox . displayName = CheckboxPrimitive . Root . displayName ;
36
+ } ;
45
37
46
38
export { Checkbox } ;
0 commit comments