Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rijvi-mahmud/shaddy/llms.txt

Use this file to discover all available pages before exploring further.

CheckboxGroupField renders a collection of shadcn/ui Checkbox elements from a list of option objects, wiring them into ShaddyForm so the bound value is a string[] array of the currently checked option values. Checking or unchecking an item adds or removes it from the array, and validation errors are shown automatically via <FormMessage>.

​
Installation

Install all ShaddyForm fields at once with the shaddy-form registry item: 
npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

​
Usage

"use client"
import { z } from "zod"
import { ShaddyForm } from "@/components/form/shaddy-form"
import { CheckboxGroupField } from "@/components/form/fields/checkbox-group-field"
import { SubmitButton } from "@/components/form/fields/submit-button"

const SKILL_OPTIONS = [
  { value: "react", text: "React" },
  { value: "vue", text: "Vue" },
  { value: "angular", text: "Angular" },
  { value: "svelte", text: "Svelte" },
]

const schema = z.object({
  skills: z
    .array(z.string())
    .min(1, { message: "Select at least one skill" }),
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = { skills: [] }

export default function Example() {
  return (
    <ShaddyForm
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-72">
        <CheckboxGroupField<FormValues>
          name="skills"
          label="Skills"
          options={SKILL_OPTIONS}
          required
        />
        <SubmitButton label="Submit" />
      </div>
    </ShaddyForm>
  )
}

​
Props

​
name
Path<T>
required
The field name. Must match a key in your Zod schema passed to ShaddyForm. The bound value is a string[].
​
options
{ value: string; text: string }[]
required
Array of option objects. value is stored in the form array when checked; text is the label displayed next to each checkbox.
​
label
string
Group label rendered above all the checkboxes. Omit to hide the group label.
​
required
boolean
When true, appends a red asterisk to the group label as a visual indicator.
​
disabled
boolean
When true, disables all checkboxes in the group.
​
column
boolean
default:"true"
When true (the default), checkboxes are stacked vertically. Set to false to arrange them in a horizontal wrapping row.
​
className
string
Additional CSS classes applied to the outermost FormItem wrapper.

​
Notes

  • CheckboxGroupField must be rendered inside a <ShaddyForm> — it reads control from useFormContext internally.
  • The bound value is a string[]. Initialise your schema field with z.array(z.string()) and an empty array default in initialValues.
  • For a single boolean checkbox (e.g. “Accept terms”), use CheckboxField instead.
  • Validation errors (e.g. minimum selection count) are rendered below the group via <FormMessage>.

Build docs developers (and LLMs) love

Get started for freeTalk to us