ConsentCheckbox

The boxed consent statement at the foot of a form.

import { ConsentCheckbox } from '@zitdevs/ui';

Examples

I agree that ZitDevs processes this data to answer my request, as the privacy policy describes.

I agree that ZitDevs processes this data to answer my request, as the privacy policy describes.

You must agree before sending the request.

Consent already given on an earlier step.

<ConsentCheckbox
  id="zd-f-consent"
  name="consent"
  required
  error={errors.consent}
  messageId="zd-consent-err"
>
  I agree that ZitDevs processes this data to answer my request, as the{' '}
  <a href="/privacy">privacy policy</a> describes.
</ConsentCheckbox>

Props

Prop	Type	Default	Notes
id	string	required	An error summary links to it.
name	string	id
value	string	'on'	Submitted when checked.
error	string	—	Why it blocks the submission; marks it invalid.
messageId	string	`${id}-message`	The error line’s id, for a form whose ids are fixed.
children	ReactNode	required	The statement, which names the checkbox. It may hold links.
defaultChecked	boolean	false	checked with onChange holds it instead.
ref	Ref<HTMLInputElement>	—	The checkbox.
className	string	—	Placement, on the outer box.
anything else	<input> attributes	—	On the checkbox: required, disabled, onChange…

Exported types: ConsentCheckboxProps.

Accessibility

• The statement is the checkbox’s label: the whole box toggles it, and its text is the name.
• A link in the statement is styled and ringed by the component: the link role, underlined at rest — colour alone would be 2.4:1 against the text, under the 3:1 WCAG 1.4.1 asks — and the focus ring.
• An error sets aria-invalid and describes the checkbox; there is no hint.

Without JavaScript

It needs none: a native checkbox in a label. It renders as a Server Component.

Theming

surface for the box, border-default (or danger with an error), body for the statement, link and link-hover for its links, primary for the checkbox; the focus ring.