shadcn.io is not affiliated with official shadcn/ui
Scope Estimate Contact Block for React Aria
Six audit checkboxes for an SEO consultancy that add hours, a rate-card price and a delivery date in words under the list.
Installation
Overview
A scoped audit form for React with React Aria, for Crawlmint. A centred header sits over a framed card. Six Checkbox rows (search visibility, page speed, accessibility, content, a technical crawl and a competitor set) each show their hours and price. A Data List under the checks totals the hours, the price and a delivery date in words, counted forward from a fixed anchor and skipping weekends. The fee line says it comes from the published rate card. A site address, a name and an email follow. Submitting checks every field, shows each problem under its control and moves focus to the first one. A valid request confirms in the same space. The studio's email, phone and hours stay under the frame. Rails and the top rule come from Guides, and the card's corners are marked. It's built from Field, Input, Checkbox, Data List, Frame, Guides, Shine Button and Button, with a CSS entrance on the header and your theme's tokens for every colour. For consultancies that price a study from a menu of parts.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call. details holds the name, email, site address and which scopes are ticked. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How are the hours, price and date worked out?
Each ticked row adds its own hours and price, and the list shows the sums. The delivery date walks forward from Tuesday 13 October 2026, the day this example is anchored to, skipping Saturdays and Sundays. It takes at least four business days, or one day for every six hours, whichever is more. Nothing is booked: the line under the list says the figures come from the published rate card.
How is each checkbox labelled?
The row's name is the checkbox's accessible name, and the smaller line under it is the description. Both are wired with aria-labelledby and aria-describedby, so the hours and the price aren't the only thing a screen reader hears. At least one row has to be ticked. Ticking a row clears that message.
What does the confirmation say, and who hears it?
It thanks the visitor by first name and repeats the scopes they ticked, the rate-card price and the worksheet date, then the email. It's a status region that takes focus when it appears, and "Send another request" brings back an empty form and puts focus on its heading. It describes the estimate they built, not a job a server has accepted.
Are the email address and phone number real?
No. hello@crawlmint.example uses the .example domain, which is reserved for examples, and +1 (555) 010-0162 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file with yours. Prices and the phone number keep their order in a right-to-left layout.
How does it fit on a phone?
The six rows stay one per line, with the hours and the price at the end of each row. The estimate stays directly under the checks. Name and email stack below sm, and the submit button goes full width. The header fades up once on load. With reduced motion it simply appears.