shadcn.io is not affiliated with official shadcn/ui
Timber and lead time Contact Block for React Aria
A custom furniture order for a workshop, with timber swatches, a finish, a quantity and a lead-time bar that grows with the number of tables.
Installation
Overview
A custom table order for Ashgrain Workshop, a furniture maker, for React with React Aria. Timber is three swatches in a Radio Group (oak, walnut, ash). The finish is one choice among oil, wax and lacquer. A Number Input sets the quantity, from 1 to 12. The spec sheet at the end names the timber, the finish, the pieces and the lead time, and a Progress bar fills as that lead time grows. On a phone the sheet follows the builder. The form checks itself, shows each problem under its field and moves focus to the first one, then a confirmation takes the builder's place while the sheet stays. The page's rails and top rule come from the Guides spine, and the sheet opens on a rule of its own. It's built from Radio Group, Toggle Group, Number Input, Data List, Progress, Field, Input, Textarea, Guides, Shine Button and Button, with a CSS transition on the header and your theme's tokens for every colour. For workshops that price a piece from a material, a finish and a count.
FAQ
How does the lead time get longer?
Each timber has a starting number of weeks: oak 4, walnut 5, ash 3. Every extra pair of tables adds a week, from the quantity above one. Two oak tables stay at 4 weeks. Twelve walnut tables are 5 plus 5, which is 10, and that 10 is also the longest the bar can show, taken from the same formula. An empty or invalid quantity shows no weeks and an empty bar. The number is written beside the bar. The bar itself is decorative.
Can the visitor clear the finish?
No. The control is built so a new press replaces the previous finish, and pressing the one that's already on leaves it on. The sheet's care line follows the finish. The finish does not change the lead time.
Is the price on the sheet a quote?
No. Each timber has an example rate per table (oak $1,280, walnut $1,640, ash $980), multiplied by the quantity. The line says "Starting at" and "Example rate, before size." Replace the rates, or remove the line, when you wire a real price.
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 timber, the finish, the quantity, the name, the email and the optional note. The confirmation repeats the count, the timber, the finish and the weeks from those same figures.
How does the form check what's typed?
The form has noValidate. On submit, problems checks a quantity from 1 to 12, a name and an email address with an @ and a domain. Timber and finish always have a value. Each problem appears under its field and focus moves to the first one. The note is optional and is not checked.
Why does the sheet stay after sending?
The confirmation replaces the builder, in the same grid cell, and takes focus. The sheet is outside that cell, so the visitor can still read the timber, the weeks and the example rate they just sent. "Start another order" clears the builder back to oak, oil and 2 tables and puts focus on its heading. The email and phone under the sheet are fictional: hello@ashgrain.example and +1 (415) 555-0105.