Choice1 check

FormCheckbox

One yes or no, like accepting terms.

Example

Installation

bunx --bun shadcn@latest add @fieldkit/form-checkbox

Needs the @fieldkit registry. Add it once

Usage

Add the field to your schema

schema.ts

import { z } from "zod"import { checkedField } from "@/lib/field-schemas"
export const schema = z.object({  terms: checkedField("Accept the terms to continue"),})

Render it inside a Form

The name prop matches the schema key.

example-form.tsx

import { Form } from "@/components/form/form"import { FormCheckbox } from "@/components/form/form-checkbox"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema"
export function ExampleForm() {  return (    <Form      schema={schema}      defaultValues={{ terms: false }}      onSubmit={save}    >      <FieldGroup>        <FormCheckbox name="terms" label="I agree to the terms" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}

Checks

CheckOptionError message

Must be checkedcheckedFieldAccept the terms to continue

Best practices

Never pre-check consent

Try these values

Terminal

checkedField("Accept the terms to continue")

Input	Result	Output
`true`	Valid	`true`
`false`	Invalid	Accept the terms to continue

API reference

FormCheckbox

PropDescription

label (required)React.ReactNodeText beside the box. Links are fine.

Field frame

PropDescription

namestringKey in the schema. Also picks the preset label and autocomplete.

labelReact.ReactNodeOverrides the preset label. Pass null to hide it.

descriptionReact.ReactNodeHint under the control.

requiredbooleanOverrides the asterisk read from the schema.

fieldPropsFormFieldPropsProps for the wrapping Field, such as className.

Add the field to your schema

Render it inside a Form

FormCheckbox

Field frame

Search docs