react-hook-form 基本的な使い方② (チェックボックスなど)

import { useForm, SubmitHandler } from "react-hook-form"

// 型を定義 : cb(チェックボックス), rg(ラジオボタン), sb(セレクトボックス)
type FormValue = {
  cb: string[];
  rg: string;
  sb: string;
}

export default function MyForm() {
  
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FormValue>({
    // デフォルト値を設定
    defaultValues: {
      cb: ["value1"], // チェックボックスの初期値を設定
      rg: "value1" // ラジオボタンの初期値を設定
    }
  });

  // 送信ボタンが押下された際のイベント
  const onSubmit: SubmitHandler<FormValue> = (data) => {
    console.log("submit", data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>チェックボックス</label>
        <div>
          <label>
            {/* 以下のバリデーションを設定 */}
            {/* いずれかのチェックボックスを選択しているか */}
            {/* 全て選択していないか(一つのみ選択可能) */}
            <input
              type='checkbox'
              value="value1"
              {...register("cb", {
                validate: {
                  required: (value) =>
                    value.length > 0 || "少なくとも一つ選択してください。",
                  maxLength: (value) => 
                      value.length <=1 || "いずれか一方のみ選択可能です。"
                }
              })}
            />
            value1
          </label>
          <label>
            <input
              type="checkbox"
              value="option2"
              {...register("cb")}
            />
            value2
          </label>
        </div>
        {errors.cb && (
          <p style={{ color: "red", fontWeight: "bold" }}>{errors.cb.message}</p>
        )}
      </div>
      <div>
        <label>ラジオボタン</label>
        <div>
          <label>
            <input
              type='radio'
              value='value1'
              {...register("rg")}
            />
            value1
          </label>
          <label>
            <input
              type='radio'
              value='value2'
              {...register("rg")}
            />
            value2
          </label>
        </div>
      </div>
      <div>
        <label>セレクトボックス</label>
        {/* 以下のバリデーションを設定 */}
        {/* いずれかの要素が選択されているか(デフォルト値の選択してくださいもNG)  */}
        <select
          {...register("sb", {
            required: "選択肢を選択してください"
          })}
        >
          <option value="">選択してください</option>
          <option value="value1">Value1</option>
          <option value="value2">Value2</option>
          <option value="value3">Value3</option>
        </select>
        {
          errors.sb && <p style={{ color: "red", fontWeight: "bold" }}>{ errors.sb.message }</p>
        }
      </div>
      <button type='submit'>送信</button>
      <button type="reset">リセット</button>
    </form>
  )
}