---
title: Consent
description: A checkbox with its label inline, for consent fields that must be ticked.
preview: consent
---
# Consent

A checkbox whose label sits next to it. `Field` renders it for `consent` followed by [Help](/docs/components/label-help-error.md) and [FieldError](/docs/components/label-help-error.md) under the row; there is no separate `Label`, by design, because the label is the clickable row.

## Preview
<!-- preview: consent -->

## Usage
```tsx
// { 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](/docs/components/yes-no.md), [Field](/docs/components/field.md), [Label, Help, FieldError](/docs/components/label-help-error.md), [Schema: field types](/docs/schema.md)