🥦
react-hook-form, shadcn, zodでcheckboxを実装する方法
↓これでいける
<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