[memo] shadcnのCheckboxをformで使う

基本、コンポーネントにはshadcnを使っていて、Checkboxもたまに使う。
使い方を超簡略化すると以下。

page.tsx

<form action={submit}>
  <Checkbox id="terms" name="agree"/>
  <Button type="submit">送信</Button>
</form>

submit.ts

export const submit = async (formData: FormData) => {
    const formJson = formDataToJSON(formData)
    const result = SCHEMA.safeParse(formJson)

    ...
}

motoi

shadcnのCheckboxは、{ name: 'agree', value: 'on' }のように、onか存在しないかで値が返ってくる。が、大体、booleanで扱いたい場合がほとんどなのでは？ということで、zodのスキーマ（上記コードのSCHEMA）でbooleanに変換する。

shcema.ts

z.object({
    agree: z.preprocess((val) => val === 'on', z.boolean()),
})

motoi

zodは非常に自由度が高く、上記のような変換にも、coerce、transform、preprocessといくつかある。preprocessはparse前に変換をするので、最初に変換しておいてbooleanの値を返すようにしている。
その他のメソッドの使い方は、以下などが参考になる。

このスクラップは3ヶ月前にクローズされました