BuzzForm
BuzzFormDocs

Checkbox Group Field

Multi-select checkbox group that stores selected values in a single array field.

Checkbox Group Field

The checkbox-group field renders multiple checkbox options and stores selected values as an array.

Usage

import { createSchema } from "@buildnbuzz/buzzform";

const schema = createSchema([
  {
    type: "checkbox-group",
    name: "interests",
    label: "Select your interests",
    required: true,
    options: [
      { label: "Design", value: "design" },
      { label: "Development", value: "development" },
      { label: "Marketing", value: "marketing" },
    ],
  },
]);

Data Shape

Selected values are submitted as a single array:

{
  "interests": ["design", "marketing"]
}

Properties

PropTypeDefaultDescription
optionsSelectOption[] | string[] | async fn-Available options
dependenciesstring[]undefinedRe-fetch async options when dependencies change
requiredbooleanfalseRequire at least one selection
minSelectednumberundefinedMinimum selected options
maxSelectednumberundefinedMaximum selected options
defaultValue(string | number | boolean)[][]Initial selected values

UI Options

PropTypeDefaultDescription
ui.variant"default" | "card""default"Option presentation style
ui.direction"vertical" | "horizontal""vertical"Layout direction for default variant
ui.columns1 | 2 | 3 | 41Responsive grid columns
ui.card.size"sm" | "md" | "lg""md"Card size preset
ui.card.borderedbooleantrueShow card borders

On this page