tsf-radio-field

1'use client';
2 
3import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
4import { Label } from '@/components/ui/label';
5import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
6import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
7 
8export interface RadioFieldOption {
9  label: string;
10  value: string;
11}
12 
13export interface RadioFieldProps {
14  options: RadioFieldOption[];
15  label?: string;
16  description?: string;
17  fieldProps?: React.ComponentProps<typeof Field>;
18  props?: React.ComponentProps<typeof RadioGroup>;
19}
20 
21export function RadioField({ options, label, description, fieldProps, props }: RadioFieldProps) {
22  const field = useFieldContext<string>();
23  const { isValid, errors } = field.state.meta;
24 
25  return (
26    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
27      {label && <FieldLabel>{label}</FieldLabel>}
28      <RadioGroup
29        name={field.name}
30        value={field.state.value}
31        onValueChange={(value) => field.handleChange(value)}
32        onBlur={field.handleBlur}
33        {...props}
34      >
35        {options.map((option) => (
36          <div key={option.value} className='flex items-center space-x-3 space-y-0'>
37            <RadioGroupItem id={`${field.name}-${option.value}`} value={option.value} aria-invalid={!isValid} />
38            <Label htmlFor={`${field.name}-${option.value}`}>{option.label}</Label>
39          </div>
40        ))}
41      </RadioGroup>
42      {!isValid && (
43        <FieldError
44          className='text-xs text-left'
45          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}
46        />
47      )}
48      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
49    </Field>
50  );
51}