Tabs Field
Tabbed container for organizing fields into sections.
Tabs Field
The tabs field renders fields in a tabbed interface for better organization.
Schema Properties
Prop
Type
Tab Properties
Prop
Type
UI Options
Same as Text Field.
Basic Usage
const schema = defineSchema({
fields: [
{ type: "text", name: "name", label: "Name" },
{
type: "tabs",
tabs: [
{
name: "personal",
label: "Personal Info",
fields: [
{ type: "text", name: "firstName", label: "First Name" },
{ type: "text", name: "lastName", label: "Last Name" },
],
},
{
name: "contact",
label: "Contact",
fields: [
{ type: "email", name: "email", label: "Email" },
{ type: "text", name: "phone", label: "Phone" },
],
},
],
},
],
});Examples
With Disabled Tab
{
type: "tabs",
tabs: [
{
label: "Basic",
fields: [{ type: "text", name: "name" }],
},
{
label: "Advanced",
disabled: { $data: "/isBasicMode", eq: true },
fields: [{ type: "text", name: "apiKey" }],
},
],
}Dynamic Tab Labels
{
type: "tabs",
tabs: [
{
label: { $data: "/companyName" },
fields: [{ type: "text", name: "details" }],
},
],
}Nested Layout Fields
{
type: "tabs",
tabs: [
{
label: "Address",
fields: [
{
type: "row",
fields: [
{ type: "text", name: "city" },
{ type: "text", name: "state" },
],
},
],
},
],
}Data Shape
Tabs fields do not contribute to form data. They are layout-only containers. Fields inside tabs are registered at the same level as siblings.
Error Counting
Use useNestedErrorCount to show error badges on tabs:
import { useNestedErrorCount } from "@buildnbuzz/form-react";
function CustomTabsField() {
const { field } = useLayoutField();
return (
<Tabs>
{field.tabs.map((tab) => {
const errorCount = useNestedErrorCount(tab.fields);
return (
<TabsTrigger key={tab.name}>
{tab.label}
{errorCount > 0 && ` (${errorCount})`}
</TabsTrigger>
);
})}
</Tabs>
);
}