Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

QA Checklist Block for Radix UI

A manual test run with fourteen cases in four categories, Pass, Fail or Skip for each, a severity for failures, a pass rate that leaves skipped tests out, a result filter and a Retest failed button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Record a manual regression run as it happens, with this QA checklist block for React with Radix UI. Fourteen test cases sit in four category bands, each with its steps, a Pass, Fail or Skip choice (an icon beside the word, the word alone for assistive tech on a phone) and, for a failure, a severity in a Native Select: Blocker, Major or Minor. The summary shows the pass rate as pass over pass plus fail with a Progress bar and says how many skipped tests it does not count ("Skipped tests are not counted: 3 of 14"). A Toggle Group filters to Failed or Untested inside a held list region, with an Empty state when nothing matches, and Retest failed sets the failures back to untested. Bands are ruled by Guides. For release testing, UAT sessions and any run where results change as you go.

FAQ

How is the pass rate worked out?

Pass divided by pass plus fail, rounded to a whole percent. Skipped and untested tests stay out of both sides, and the block says so in words next to the number. With no pass or fail yet it shows "No pass rate yet" rather than 0%.

What does Retest failed do?

It sets every failed test back to untested, so the rate recovers only as you rerun them. It stays focusable when there is nothing to reset and answers "No failed tests to retest."

Why is the severity menu always in the row?

Its slot is reserved for every test and hidden until a test fails, so choosing Fail never shifts the rows below. The hidden menu is also removed from the tab order.

What stays local, and how do I wire it for real?

Results live on the page and nothing is recorded, so the run resets on reload. In your app, save each result and severity from setResult and setSeverity against a run id, and load the cases from your test plan.

How does it look on a phone?

Each case shows its title and steps, then the three result choices as icons and the severity menu on one line. The choices are native radio buttons, so arrow keys move between them and each group is named by its test.

All 100 todo list blocks