rhf-checkbox-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import type * as React from 'react';
5import { useController } from 'react-hook-form';
6import { Checkbox } from '@/components/ui/checkbox';
7import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
8 
9export interface CheckboxFieldProps extends Omit<React.ComponentProps<typeof Checkbox>, 'checked' | 'onCheckedChange'> {
10  lens: Lens<boolean>;
11  label: string;
12  description?: string;
13}
14 
15export function CheckboxField({ lens, label, description, ...props }: CheckboxFieldProps) {
16  const { field, fieldState } = useController(lens.interop());
17  const id = props.id ?? field.name;
18 
19  return (
20    <Field className='gap-2' data-invalid={fieldState.invalid}>
21      <div className='flex items-center gap-2'>
22        <Checkbox
23          {...props}
24          id={id}
25          name={field.name}
26          checked={field.value ?? false}
27          onCheckedChange={(checked) => field.onChange(checked === true)}
28          onBlur={field.onBlur}
29          aria-invalid={fieldState.invalid}
30        />
31        <FieldLabel htmlFor={id} className='text-sm cursor-pointer'>
32          {label}
33        </FieldLabel>
34      </div>
35      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
36      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
37    </Field>
38  );
39}