tsf-checkbox-field

1'use client';
2 
3import { Checkbox } from '@/components/ui/checkbox';
4import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
5import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
6 
7export interface CheckboxFieldProps {
8  label: string;
9  description?: string;
10  fieldProps?: React.ComponentProps<typeof Field>;
11  props?: React.ComponentProps<typeof Checkbox>;
12}
13 
14export function CheckboxField({ label, description, fieldProps, props }: CheckboxFieldProps) {
15  const field = useFieldContext<boolean>();
16  const { isValid, errors } = field.state.meta;
17 
18  return (
19    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
20      <div className='flex items-center gap-2'>
21        <Checkbox
22          id={field.name}
23          name={field.name}
24          checked={field.state.value}
25          onCheckedChange={(checked) => field.handleChange(checked === true)}
26          onBlur={field.handleBlur}
27          aria-invalid={!isValid}
28          {...props}
29        />
30        <FieldLabel htmlFor={field.name} className='text-sm cursor-pointer'>
31          {label}
32        </FieldLabel>
33      </div>
34      {!isValid && (
35        <FieldError
36          className='text-xs text-left'
37          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}
38        />
39      )}
40      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
41    </Field>
42  );
43}