Checkbox Group Field
CheckboxGroupField is a specialized reusable input component for Shaddy Form.
CheckboxGroupField is a specialized reusable input component for Shaddy Form. It is used for multiple checkbox selections and supports labels, required state, flexible layout, and more.
Installation
pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/checkbox-group-field
Props
| Name | Type | Default | Description |
|---|---|---|---|
name | string (from react-hook-form Path) | required | The field name (must match your form schema). |
label | string | The label displayed above the group. | |
options | { text: string; value: string }[] | required | Array of options for the checkbox group. |
className | string | Additional CSS classes for the field container. | |
disabled | boolean | Disables all checkboxes when true. | |
column | boolean | true | Arranges checkboxes in a column (or row if false). |
required | boolean | Marks the field as required. |
Usage
const skillOptions = [
{ text: "React", value: "react" },
{ text: "Vue", value: "vue" },
{ text: "Angular", value: "angular" },
]
<ShaddyForm>
<CheckboxGroupField
name="skills"
label="Skills"
options={skillOptions}
required
/>
</ShaddyForm>
Notes
CheckboxGroupFieldis intended for multiple checkbox selection (array of values).- Use the
columnprop to control vertical or horizontal layout.
