Visually Hidden Input

Forms

About

A visually hidden native input that mirrors a custom control's value/checked state so forms submit correctly while keeping the styled UI clean.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Visually Hidden Input to your project and fits it to your theme.

Code

How Visually Hidden Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import VisuallyHiddenInput from "@/components/ui/visually-hidden-input";

export default function VisuallyHiddenInputDemo() {
  const [checked, setChecked] = React.useState(false);
  const controlRef = React.useRef<HTMLButtonElement>(null);

  return (
    <form className="flex items-center gap-3">
      <button
        type="button"
        ref={controlRef}
        onClick={() => setChecked((prev) => !prev)}
        aria-checked={checked}
        role="checkbox"
        className="flex h-6 w-6 items-center justify-center rounded-md border border-input bg-background text-sm text-primary shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {checked ? "\u2713" : ""}
      </button>
      <span className="text-sm text-foreground">Accept terms</span>
      <VisuallyHiddenInput
        type="checkbox"
        checked={checked}
        control={controlRef.current}
        name="terms"
      />
    </form>
  );
}