An invisible decoy input component for bot detection in React forms. It renders an off-screen, zero-size input that real users never interact with — bots that fill every visible field will trigger it, allowing the server to reject the submission. ## Key Components - **`HoneypotField`** — A `forwardRef` component accepting a `name` prop, used to wire the input into form submission data and connect the ref from `useHumanitySignals`. ## Usage Example ```typescript import { HoneypotField } from './honeypot-field' import { useHumanitySignals } from '@/hooks/use-humanity-signals' function ContactForm() { const { honeypotInputProps } = useHumanitySignals() return (

{/* Invisible to users; bots that fill it are blocked server-side */} Send ) } ``` ## Bot Detection Strategy The field is hidden using CSS layout utilities only (no `display:none`, `visibility:hidden`, or `type="hidden"`), since sophisticated bots skip those patterns. Instead it uses: | Technique | Purpose | |---|---| | `absolute w-px h-px -m-px overflow-hidden` | Off-screen, zero effective size | | `aria-hidden="true"` | Excluded from accessibility tree | | `tabIndex={-1}` | Excluded from tab order | | `pointer-events-none opacity-0` | Not clickable or visible | | `autoComplete="off"` | Prevents browser autofill from triggering it | | No `` | Avoids id coupling and screen reader exposure | **Server-side:** reject any submission where this field's value is non-empty.