Group Field
Named container that nests data in an object.
Group Field
The group field renders fields in a named container that creates nested data.
Schema Properties
Prop
Type
UI Options
Same as Text Field.
Basic Usage
const schema = defineSchema({
fields: [
{ type: "text", name: "name", label: "Name" },
{
type: "group",
name: "address",
label: "Address",
fields: [
{ type: "text", name: "street", label: "Street" },
{ type: "text", name: "city", label: "City" },
{ type: "text", name: "zip", label: "ZIP" },
],
},
],
});
// Result: { name: string, address: { street: string, city: string, zip: string } }Examples
Nested Contact Info
{
type: "group",
name: "contact",
label: "Contact Information",
fields: [
{ type: "email", name: "email", label: "Email" },
{ type: "text", name: "phone", label: "Phone" },
],
}Nested Group
{
type: "group",
name: "billing",
label: "Billing Address",
fields: [
{
type: "group",
name: "address",
fields: [
{ type: "text", name: "street", label: "Street" },
{ type: "text", name: "city", label: "City" },
],
},
{ type: "text", name: "zip", label: "ZIP" },
],
}
// Result: { billing: { address: { street: string, city: string }, zip: string } }With Conditional Visibility
{
type: "group",
name: "company",
label: "Company Details",
condition: { $data: "/isBusiness", eq: true },
fields: [
{ type: "text", name: "name", label: "Company Name" },
{ type: "text", name: "taxId", label: "Tax ID" },
],
}Data Shape
Group fields do contribute to form data as nested objects:
// Schema
{
type: "group",
name: "address",
fields: [
{ type: "text", name: "city" },
{ type: "text", name: "zip" },
],
}
// Result type: { address: { city: string, zip: string } }Error Counting
Use useNestedErrorCount to show error badges in group headers:
import { useNestedErrorCount } from "@buildnbuzz/form-react";
function CustomGroupField() {
const { field } = useLayoutField();
const errorCount = useNestedErrorCount(field.fields);
return (
<div>
<h3>{field.label} {errorCount > 0 && `(${errorCount} errors)`}</h3>
{/* nested fields */}
</div>
);
}