shadcn.io is not affiliated with official shadcn/ui
Procurement Pack FAQ Block for Radix UI
A FAQ for a data platform with a procurement pack beside the questions: three documents as checkboxes with a live count, an email field and one Shine Button that requests what is ticked.
Installation
Overview
A procurement pack FAQ for React with Radix UI. A title band opens the block; under it, seven questions in hairline rows sit at the start, and in the end column behind a split divider, sticky while the rows scroll, a card in card holds the pack: three documents as checkboxes, a security report, a data processing addendum and a penetration-test summary, each with its page count, a live "3 of 3 selected, 63 pages in all" line, an email field and the block's one Shine Button, "Request 3 documents", which names exactly what it will ask for. Untick one and the button, the count and the pages change; untick all and the button asks you to choose a document. Asking sends nothing from the block itself: it confirms in a polite status line you wire to your own endpoint. On a phone the pack follows the questions. It's built from Accordion, Checkbox, Field, Input Group, Shine Button and Guides, with your theme's tokens for every colour. For enterprise pages, trust centres and any product whose buyers arrive with a checklist.
FAQ
How do I change the documents?
Edit DOCS at the top of the file: each document has an id, a title, a one-line note and its pages. The checkboxes, the count, the page total and the button label all read from it, and the third answer lists the titles from the same array. All documents start ticked; change the initial selected state to start with fewer.
What happens when someone presses the button?
The form checks the email field, a required type="email" input, and then shows "Requested. Check your inbox within one business day for 3 documents." in a status line that screen readers announce. Nothing is sent: put your own request in the submit handler with the email and the ticked ids. Changing a checkbox or the email clears the confirmation, and the line keeps room for two lines so it never moves the pack.
How do the checkboxes work?
Each document is a Checkbox with an id, inside a label that points at it, so clicking anywhere on the tile toggles it; the box is named by the document's title and described by its note.
The three tiles sit in a group named "The procurement pack". A ticked tile gets a quiet tint and a darker edge; the colour of the button is the only primary on the block.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. One answer is open at a time. For search engines, add structured data built from the same QUESTIONS array.
How does it work with a keyboard?
Tab moves through the questions, then the three checkboxes, the email field and the button; Space toggles a checkbox and Enter in the email field submits. Each question is a button inside its own h3 under the section's h2.
The Up and Down arrows also move between questions, and Home and End jump to the first and last, when a question has the focus.
How does it fit on a phone?
Below the lg breakpoint the title comes first, the questions follow from rail to rail, and the pack comes under them behind its own top rule, with the button across its full width. On a desktop the pack stays in view beside the rows while you read. Nothing scrolls sideways at 320 pixels.