Skip to content

← All components

Actions and forms

Captcha

Controlled, presentation-only human-verification surface inspired by Cap.

Live example

Interactive simulation

Showroom simulation

Try the visual flow

Click the control to simulate verification. The result appears after about 1.4 seconds; click again to retry.

No verification is performed

This showroom wrapper changes visual state only. Production apps must connect their own trusted verification implementation.

Presentation only

The state and motion contract is informed by the official Cap widget (Apache-2.0). This component includes no proof-of-work, network, worker, or token logic.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Captcha } from "@cofob/design-system-react";

/**
 * Complete Captcha parameter reference.
 * @param state
 *   type: "idle" | "verifying" | "success" | "error"
 *   default: "idle"
 *   example: "verifying"
 * @param labels
 *   type: Partial<Record<string, string>>
 *   default: —
 *   example: {{ idle: "Verify", verifying: "Checking…", success: "Done", error: "Try again" }}
 * @param button attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function CaptchaExample() {
  return (
    <Captcha state="idle" onClick={startVerification} />
  );
}

Svelte

svelte
<script lang="ts">
  import { Captcha } from "@cofob/design-system-svelte";

  // Complete Captcha parameter reference.
  // state
  //   type: "idle" | "verifying" | "success" | "error"
  //   default: "idle"
  //   example: "verifying"
  // labels
  //   type: Partial<Record<string, string>>
  //   default: —
  //   example: {{ idle: "Verify", verifying: "Checking…", success: "Done", error: "Try again" }}
  // button attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Captcha state={captchaState} onclick={startVerification} />

HTML

html
<!--
  Complete Captcha parameter reference.
  state
    type: "idle" | "verifying" | "success" | "error"
    default: "idle"
    example: "verifying"
  labels
    type: Partial<Record<string, string>>
    default: —
    example: {{ idle: "Verify", verifying: "Checking…", success: "Done", error: "Try again" }}
  button attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<button class="cf-captcha" data-state="idle">…</button>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
state"idle" | "verifying" | "success" | "error""idle"React · Svelte · HTML"verifying"Controlled visual state; the Captcha intentionally contains no verification logic.
labelsPartial<Record<string, string>>—React · Svelte · HTML{{ idle: "Verify", verifying: "Checking…", success: "Done", error: "Try again" }}Localized visible and accessible labels.
button attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.