🥦

react-hook-form, shadcn, zodでcheckboxを実装する方法

2024/08/12に公開

↓これでいける

        <FormField
          control={form.control}
          name="isDisplayed"
          render={({ field }) => (
            <FormItem>
              <FormControl>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="isDisplayed"
                    onCheckedChange={field.onChange} // <- これが必要
                    checked={field.value}
                  />
                  <label
                    htmlFor="isDisplayed"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    表示しますか?
                  </label>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

ポイント

  • CheckboxにonCheckedChange={field.onChange}を渡す必要がある。
  • 渡さないとUI的にチェックマークはつくけどvalueが変わらない。

よいshadcnライフをお送りください\(^o^)/

Discussion