Spaces:
Build error
Build error
File size: 1,370 Bytes
4002561 78dd858 4002561 78dd858 4002561 78dd858 4002561 78dd858 4002561 78dd858 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import { useId } from 'react'
interface Props {
/** Label text next to the checkbox */
label: string
/** Controlled checked state */
checked: boolean
/** Change handler */
onChange: (checked: boolean) => void
/** Disabled state */
disabled?: boolean
/** Extra CSS classes on the wrapper */
className?: string
}
export default function RetroCheckbox({
label,
checked,
onChange,
disabled = false,
className = '',
}: Props) {
const id = useId()
return (
<label
htmlFor={id}
className={`
inline-flex items-center gap-[6px]
text-retro-sm font-retro
${disabled ? 'text-retro-darkgray cursor-not-allowed' : 'cursor-pointer'}
select-none
${className}
`}
>
<input
id={id}
type="checkbox"
checked={checked}
onChange={(e) => onChange(e.target.checked)}
disabled={disabled}
className="sr-only"
/>
<span
aria-hidden="true"
className={`
inline-flex items-center justify-center
w-[13px] h-[13px]
border border-retro-black
bg-retro-white
shadow-retro-well
text-[10px] leading-none font-bold
shrink-0
`}
>
{checked && <span className="text-retro-black">x</span>}
</span>
{label}
</label>
)
}
|