React Hook Form 6 + Headless UI

Listbox.jsx

const languageList = [
  { name: 'English', short: 'en' },
  { name: 'Türkçe', short: 'tr' },
  { name: 'Arapça', short: 'ar' },
];

<Controller
  control={control}
  name="language"
  defaultValue={{ name: 'English', short: 'en' }}
  render={(
    { onChange, onBlur, value, name, ref },
    { invalid, isTouched, isDirty },
  ) => (
    <Listbox value={value} onChange={(e) => onChange(e)} inputRef={ref}>
      <div className="relative mt-1">
        <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
          <span className="block truncate">{value.name}</span>
        </Listbox.Button>
        <Transition
          as={Fragment}
          leave="transition ease-in duration-100"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
            {languageList.map((language, index) => (
              <Listbox.Option
                key={index}
                className={({ active }) =>
                  `${active ? 'text-amber-900 bg-amber-100' : 'text-gray-900'}
          cursor-default select-none relative py-2 pl-10 pr-4`
                }
                value={language}
              >
                {({ selected, active }) => (
                  <>
                    <span
                      className={`${
                        selected ? 'font-medium' : 'font-normal'
                      } block truncate`}
                    >
                      {language.name}
                    </span>
                    {selected ? (
                      <span
                        className={`${
                          active ? 'text-amber-600' : 'text-amber-600'
                        }
                absolute inset-y-0 left-0 flex items-center pl-3`}
                      />
                    ) : null}
                  </>
                )}
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </Transition>
      </div>
    </Listbox>
  )}
/>

RadioGroup.jsx

<div className="mt-7 mb-3 w-full">
  <Controller
    name="is_refrigerated"
    control={control}
    defaultValue={true}
    render={({ field: { value, ref, onChange } }) => (
      <RadioGroup
        value={value}
        onChange={onChange}
        inputRef={ref}
        className="w-full"
      >
        <RadioGroup.Label className="text-lg font-medium">
          Refrigerated:
        </RadioGroup.Label>
        <div className="mt-3 flex">
          <RadioGroup.Option
            value={true}
            className={({ active, checked }) =>
              `${active ? 'bg-indigo-500 text-white' : ''}
                ${checked ? 'bg-indigo-500 text-white' : ''}
                w-1/2 py-4 flex justify-center items-center cursor-pointer border-2 border-indigo-500`
            }
          >
            {({ active, checked }) => (
              <RadioGroup.Label as="p">Yes</RadioGroup.Label>
            )}
          </RadioGroup.Option>

          <RadioGroup.Option
            value={false}
            className={({ active, checked }) =>
              `${active ? 'bg-indigo-500 text-white' : ''}
                ${checked ? 'bg-indigo-500 text-white' : ''}
                w-1/2 py-4 flex justify-center items-center cursor-pointer border-2 border-indigo-500`
            }
          >
            {({ active, checked }) => (
              <RadioGroup.Label as="p">No</RadioGroup.Label>
            )}
          </RadioGroup.Option>
        </div>
      </RadioGroup>
    )}
  />
</div>

Switch.jsx

<Controller
  name="exclusive"
  control={control}
  defaultValue={false}
  render={({ onChange, value, ref }) => (
    <Switch
      checked={value}
      onChange={(e) => onChange(e)}
      inputRef={ref}
      className={`${
        value ? 'bg-blue-600' : 'bg-gray-200'
      } relative inline-flex items-center h-6 rounded-full w-11`}
    >
      <span className="sr-only">Use setting</span>
      <span
        className={`${
          value ? 'translate-x-6' : 'translate-x-1'
        } inline-block w-4 h-4 transform bg-white rounded-full`}
      />
    </Switch>
  )}
/>