【React】MantineのSwitchコンポーネントでformの値を反映させる

概要

UIフレームワークのMantineではuse-formのドキュメントにある通り、フォームの値を管理する機能もあります。ただ、Switchコンポーネントにuse-formのドキュメント通りに適用しても、デフォルト値をtrueに設定しても表示に反映されない動作でした（2025年4月時点だと）。
ので、formの設定内容をSwitchコンポーネントにどうやって適用させるのかという対応のメモ書きです。

前提

• 使用したManitneのバージョンは7.17.2です。

対応

以下の実装の通り、getInputPropsに{ type: 'checkbox' }を設定することで反映するようになりました。

export type TaskInputFormValues = {
  displayFlag: boolean;
};

export const TaskInputComponent: FC<Props> = ({ submit }) => {
  const form = useForm<TaskInputFormValues>({
    mode: "uncontrolled",
    initialValues: {
      displayFlag: true,
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => submit(values))}>
      <Switch
        key={form.key("displayFlag")}
        {...form.getInputProps("displayFlag", { type: "checkbox" })} // { type: "checkbox" }を設定することでform値を表示に反映
        label="表示フラグ"
      />
    </form>
  );
};