shadcn.io is not affiliated with official shadcn/ui
Captcha Failed Error Block for React
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 Base 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.
Related
- Pro
Phone Not Verified Error
Sign-in and identityA full-screen page for an unconfirmed phone number: a Send the code button that waits 30 seconds, a six-slot code field with the demo code printed once, and a list of what is locked that flips to unlocked when the number is verified.
- Pro
Two-Factor Required Error
Sign-in and identityA full-screen gate for a workspace that now requires two-factor authentication: a grace period drawn as fourteen day segments, three method cells, a Set up now button and a list of steps that follows the chosen method.
- Pro
Rate Limit Error
Blocked and limitedA full-screen 429 for an API key over its limit: a 10 by 10 grid of the last 60 seconds of requests, the Retry-After header worked out from the oldest, and a demo clock that empties the oldest cells so Retry works.
- Pro
Captcha Verification Login
Risk checksA sign-in page with a human check that never shows a picture: one checkbox that runs a short Checking beat and verifies, escalating to a typed question when the demo switch says the connection looks suspicious.
- Pro
Expired Link Error
Sign-in and identityA full-screen page for an expired password-reset link: the link's life drawn on a time axis, the facts in words, and an Email me a new link button that hands its place to a 30-second cooldown.
- Pro
Age Restricted Error
Blocked and limitedA host page and the age gate in front of it: an alert dialog with two Tabs (a checkbox, or a date of birth in three selects) that works the age out against a fixed day, stores nothing, and unblurs the drawn page behind it when it passes.