Components

kibbleforms has two layers. Headless primitives (kibbleforms/headless) carry behavior and accessibility with no styling: form state, validation, conditional logic, page navigation, partial saves, focus management, labels and aria. Styled components (kibbleforms) sit on top and look finished out of the box, authored in Tailwind and themed with --kb-* CSS variables. Both are replaceable: restyle with the theme, size, layout and classNames props, variables or classes, or start from the primitives.

#Zero-markup form

import { Form } from 'kibbleforms';
import { kibble } from '@/kibble/client';
import { waitlist } from '@/kibble/forms/waitlist';

<Form schema={waitlist} client={kibble} />

With no children, Form renders every page from the schema: one page gives you the fields and a submit button; several pages give you MultiStep with a progress line, Back and Next. After submit it shows the settings.success message, or redirects. Wrap the app once in KibbleProvider to drop the client prop.

#Composing

Children replace the automatic layout. Field renders any field by key (label, help, the right control, error); the controls, Label, Help, FieldError, Submit, Page, Progress and MultiStep can be arranged freely, mixed with your own JSX.

import { Form, Field, Submit } from 'kibbleforms';

<Form schema={contact} client={kibble} className="grid gap-6">
  <div className="grid grid-cols-2 gap-4">
    <Field name="first_name" />
    <Field name="last_name" />
  </div>
  <Field name="email" />
  <Field name="message" />
  <Submit className="w-auto justify-self-end" />
</Form>

Every styled component accepts className (merged with tailwind-merge, so your utilities win) and renders data-kb="<name>" for CSS. Hidden fields and pages (showWhen) render nothing. See Styling for the three depths of customization.

#All components

#Behavior you get for free

• Client validation from the schema, with the same validator the server runs; format errors on blur, "required" on submit; focus moves to the first invalid control.
• Submit with an idempotency key and retries on network errors and 5xx; one logical submit never lands twice.
• Page URL, referrer and UTM parameters captured; a honeypot and time-to-submit as spam signals; Turnstile when a site key is set (Kibble checks it once it has the widget's secret key); agents that declare themselves (actor) are labeled.
• Partial saves when a visitor moves to the next step, never on keystrokes.
• Prefill from initialValues, prefill: { query } and defaultValue; autocomplete attributes from the schema.
• Conditional fields and pages (Conditional logic), and schedule successes that land on a booking page with name and email filled in.