"use client"; import { toast } from "sonner"; import { defineSchema, type InferType, useDataField } from "@buildnbuzz/form-react"; import { Form, FormContent, FormFields, FormSubmit, FormActions, } from "@/registry/shadcn/form"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; // 1. Define our custom field component. // It uses `useDataField` to easily hook into the headless form state. function ColorPickerField() { const { fieldApi, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, handleChange, handleBlur, } = useDataField(); const value = (fieldApi.state.value as string) || "#000000"; return ( {label && ( {label} {isRequired ? * : null} )}

handleChange(e.target.value)} onBlur={handleBlur} disabled={isDisabled} readOnly={isReadOnly} aria-invalid={isInvalid} className="h-8 w-8 shrink-0 cursor-pointer border-0 p-0 rounded-md overflow-hidden shadow-none [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-moz-color-swatch]:border-none" /> handleChange(e.target.value)} onBlur={handleBlur} disabled={isDisabled} readOnly={isReadOnly} aria-invalid={isInvalid} placeholder="#000000" className="flex-1 font-mono uppercase" />

{description && !isInvalid && ( {description} )} {isInvalid && } ); } // 2. Define the schema, mixing standard fields, layout "ui" fields, // and our custom "color-picker" field. const customSchema = defineSchema({ fields: [ { type: "ui", content: (

Theme Builder

Configure your application's appearance by selecting custom colors below.

), }, { type: "text", name: "themeName", label: "Theme Name", placeholder: "e.g., Midnight Blue", required: true, }, { type: "ui", content:

Brand Colors

, }, { type: "color-picker", name: "primaryColor", label: "Primary Color", description: "Main color used for buttons and primary actions.", defaultValue: "#0f172a", required: true, }, { type: "color-picker", name: "secondaryColor", label: "Secondary Color", description: "Color used for secondary elements and subtle backgrounds.", defaultValue: "#f1f5f9", }, { type: "color-picker", name: "accentColor", label: "Accent Color", description: "Color used for active states and highlights.", defaultValue: "#3b82f6", }, ], }); export default function UiAndCustomFieldsExample() { const handleSubmit = async ({ value }: { value: unknown }) => { // value is inferred properly. Custom fields without explicitly defined type interfaces // fall back to `unknown`. Layout fields don't show up here at all. const data = value as InferType; toast("Saved Custom Form", { description: (

          {JSON.stringify(data, null, 2)}

), }); }; return ( UI Layout & Custom Fields Mixing inline UI components with completely custom registered fields. {/* We pass our custom fields inside the `registries.fields` prop to register them */} ); }