Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 2x 2x 2x 23x 23x 1x | import { forwardRef, InputHTMLAttributes } from 'react'
import cn from 'classnames'
import { FieldError } from 'react-hook-form'
export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
name: string
label?: string | JSX.Element
error?: FieldError
indeterminate?: boolean
}
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({ name, label, className = '', error, indeterminate, ...rest }, ref) => {
return (
<>
<div
className={cn('inline-flex items-center gap-base', {
[className]: className,
})}
>
<input
{...rest}
ref={ref}
id={name}
name={name}
checked={rest.checked && !indeterminate}
type='checkbox'
className={cn('custom-checkbox w-[22px] h-[22px] opacity-0 flex-shrink-0', {
'checkbox-indeterminate': indeterminate,
})}
/>
<label
data-testid='checkbox-label'
htmlFor={name}
className={cn('relative text-black', {
'before:border-background-primary': !error,
'before:border-red': error,
'text-text-secondary': rest.disabled,
'after:!-left-[1.300rem]': !label && indeterminate,
})}
>
<h4>{label}</h4>
</label>
</div>
{error && (
<p data-testid='checkbox-error-message' className='text-red mt-extra-small'>
{error.message}
</p>
)}
</>
)
}
)
|