Consent

A checkbox whose label sits next to it. Field renders it for consent followed by Help and FieldError under the row; there is no separate Label, by design, because the label is the clickable row.

#Preview

#Usage

// { key: 'consent', type: 'consent', label: 'Email me when Acme launches', help: 'One email, no newsletters.', required: true }
import { Form } from 'kibbleforms';

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

// by hand, with richer label content:
import { Consent } from 'kibbleforms';
<Consent name="consent">
  I agree to the <a href="/terms" className="underline">terms</a>
</Consent>

A required consent must be true to submit ("You need to agree to continue"); an optional one submits false when unticked.

#Props

Prop	Type	Default	Description
name	string	required	The field key.
children	ReactNode	field.label	Replaces the label text. Help comes from <Help name>, which Field renders for you.
className	string	flex items-start gap-3 text-sm …	Merged onto the <label>.
…<label> attributes			Spread on the <label> (except onChange).

Rendered: <label for data-kb="consent"><input type="checkbox" …/><span>label</span></label>. The checkbox carries the field's id, aria-required, aria-invalid and aria-describedby (pointing at the Help and FieldError elements that Field renders under the row, indented to align with the text).

#Variants and states

• Required: the indicator from requiredIndicator (none by default) is appended to the label text; an unticked required box shows its error on submit.
• Error: unticked on submit shows "You need to agree to continue" under the row (indented to align with the text).
• Prefill: defaultValue: true pre-ticks it; think twice before doing that for consent.

#Customization

• Tokens: --kb-input-bg and --kb-border (the unticked box), --kb-primary and --kb-primary-fg (the ticked box and its check), --kb-fg, --kb-error; help uses --kb-muted-fg through Help.
• The box is centered on the label's first line; className="items-center" centres it on the whole label instead.
• CSS hooks: [data-kb="consent"], [data-kb="consent"] .kb-check (Kibble draws the box, so it follows the theme; ::before is the check).

#Accessibility

A real <label> wraps the checkbox, so the whole row is clickable and announced as one control; help and error are linked with aria-describedby and the error is a live region; required and invalid states are exposed with aria-required/aria-invalid.

#Related

YesNo, Field, Label, Help, FieldError, Schema: field types