eeff292
import { IconCheck as Check } from '@tabler/icons-react'
export interface CheckboxProps {
checked: boolean
onChange: (checked: boolean) => void
id?: string
'aria-label'?: string
disabled?: boolean
}
/** 18px square checkbox: orange fill + dark check when active (auth design). */
export function Checkbox({ checked, onChange, id, disabled, ...aria }: CheckboxProps) {
return (
<button
type="button"
id={id}
role="checkbox"
aria-checked={checked}
disabled={disabled}
onClick={() => onChange(!checked)}
className={`flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 ${
checked ? 'border-primary bg-primary text-primary-foreground' : 'border-input bg-card'
}`}
{...aria}
>
{checked && <Check size={12} strokeWidth={3} aria-hidden />}
</button>
)
}