shadcn.io is not affiliated with official shadcn/ui
Captcha Failed Error Block for Radix UI
A full-screen page for a human check that timed out: a box to tick that escalates to a typed question, with no picture to read, over four accordion rows that show what the check looked at and what to do.
Installation
Overview
Explain a failed human check instead of only repeating it, with this captcha failed page for React with Radix UI. It's the screen Stubmoor, a concert-ticket resale site, shows when its check timed out: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. Under the heading, the Shine Button Try again is the check itself: a Checkbox to tick, "I'm a person, not a script", which escalates to one typed question (a sum, then a day of the week after a miss) with the demo answer printed in the label. No picture is ever shown. Below, an Accordion lists what the check looked at: time (failed, open, with its fix), cookies, JavaScript and network, each with a shape and a word. The rules come from Guides, and the entrance is CSS only. For ticketing, sign-up and checkout pages that run a human check.
FAQ
Does it verify anything?
No. The box alone never settles it in this demo: ticking it and pressing Try again waits a moment and then says the box couldn't decide and asks one question. A wrong answer asks the next question, and a right one says it passed and that nothing was held. Pressing Try again with the box empty names the problem and focuses the box. To wire it for real, post the box's result or the answer to your verification service from tryAgain and trust only its answer.
Why is there no picture to read?
Because a picture of distorted letters or traffic lights shuts out people who can't see it, and the typed question is something a screen reader and a keyboard handle like any other field. It is still not a security measure: the demo prints the answer in the label. A real page should verify on the server and offer an alternative route (here, the Get help link) for people who can't pass the check.
Where do the four signals come from?
They are typed constants: the time the check allows (2:00) and the time this one took (2:41) are numbers in the file, and the failed row's sentence is built from them; the other three passed. In your app, report what your check actually measured. Only one row is open at a time, every row's panel has the same height, and opening another never moves the page.
How can you tell the failed row from the others without colour?
By shape and word: a cross and a bordered "Failed" in heavier type for the one that failed, a tick and "Allowed", "Running" or "Steady" for the others. The cross is the page's only status colour.
How does it work with a keyboard?
Tab runs the box (or the question's field), Try again and the four accordion rows; Space ticks the box and Enter or Space opens a row. Pressing Try again names a missing tick or answer and moves focus there; a result moves focus to Start over so the next step is one key away.