rhf-select-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import type { SelectProps } from '@radix-ui/react-select';
5import { useController } from 'react-hook-form';
6import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
7import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
8 
9export type SelectFieldOption = Record<string, string>;
10 
11export interface SelectFieldProps extends Omit<SelectProps, 'value' | 'defaultValue' | 'onValueChange'> {
12  lens: Lens<string>;
13  options: SelectFieldOption;
14  label?: string;
15  placeholder?: string;
16  description?: string;
17}
18 
19export function SelectField({ lens, options, label, description, placeholder, ...props }: SelectFieldProps) {
20  const { field, fieldState } = useController(lens.interop());
21 
22  return (
23    <Field className='gap-2' data-invalid={fieldState.invalid}>
24      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
25      <Select name={field.name} value={field.value ?? ''} onValueChange={field.onChange} {...props}>
26        <SelectTrigger id={field.name} aria-invalid={fieldState.invalid} className='w-full'>
27          <SelectValue placeholder={placeholder} />
28        </SelectTrigger>
29        <SelectContent>
30          {Object.entries(options).map(([optionLabel, value]) => (
31            <SelectItem key={optionLabel} value={value}>
32              {optionLabel}
33            </SelectItem>
34          ))}
35        </SelectContent>
36      </Select>
37      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
38      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
39    </Field>
40  );
41}