Honeypot

A field no human sees and no human fills, under a name no form asks for: leave_blank. Put one in every public form; the server reads a filled one as a failed submission.

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

Examples

There is nothing to see: the demo below holds one, labelled in Spanish, off screen. Its id is fixed (zd-f-leave_blank), so a page holds one per form.

Deje este campo vacío

<form method="post" action="/contact#zd-result">
  <Honeypot />
  {/* the questions */}
</form>

Props

Prop	Type	Default	Notes
labels	Partial<HoneypotLabels>	English	{ leaveBlank }, its label. es.honeypot.
className	string	—	Placement, on the wrapper.

Nothing else, on purpose: it never takes a value, so a re-render never gives one back.

Exported types: HoneypotProps, HoneypotLabels, and the label sets honeypotLabels.

Accessibility

• Off screen and aria-hidden, and its input is out of the tab order (tabindex="-1"), which is also what lets it sit under aria-hidden.
• Its label, “Leave this field empty”, says what to do to the rare reader whose tools reach it.
• autocomplete="off", so the browser does not fill it for a person.

Without JavaScript

It needs none, and works because of that: not type="hidden" and not display: none, which bots know to skip. The server checks it.

Theming

None: it is never seen.