rhf-radio-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import type * as React from 'react';
5import { useController } from 'react-hook-form';
6import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
7import { Label } from '@/components/ui/label';
8import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
9 
10export interface RadioFieldProps
11  extends Omit<React.ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'> {
12  lens: Lens<string>;
13  options: string[];
14  label?: string;
15  description?: string;
16}
17 
18export function RadioField({ lens, options, label, description, ...props }: RadioFieldProps) {
19  const { field, fieldState } = useController(lens.interop());
20 
21  return (
22    <Field className='gap-2' data-invalid={fieldState.invalid}>
23      {label && <FieldLabel>{label}</FieldLabel>}
24      <RadioGroup
25        name={field.name}
26        value={field.value ?? ''}
27        onValueChange={field.onChange}
28        onBlur={field.onBlur}
29        className='flex flex-col space-y-1'
30        aria-invalid={fieldState.invalid}
31        {...props}
32      >
33        {options.map((value) => (
34          <div key={value} className='flex items-center space-x-3 space-y-0'>
35            <RadioGroupItem id={`${field.name}-${value}`} value={value} aria-invalid={fieldState.invalid} />
36            <Label htmlFor={`${field.name}-${value}`} className='font-normal'>
37              {value}
38            </Label>
39          </div>
40        ))}
41      </RadioGroup>
42      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
43      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
44    </Field>
45  );
46}