shadcn.io is not affiliated with official shadcn/ui
Four Photo Slots Contact Block for React
Four fixed photo tiles for an antiques appraiser, each filling with a thumbnail and a check, plus a category combobox and an estimated value.
Installation
Overview
A photo-slot appraisal form for React with Base UI, for Hallowby Appraisals. A start-aligned header sits over ruled bands. Four File Upload triggers (front, back, marks, signature) share one count, "n of 4 photos", and a Progress bar. A filled tile shows the thumbnail, a check and a remove button. A Combobox picks the category, an Input Group takes the estimate in dollars, and name and 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, which takes focus. The studio's email, phone and hours stay in an address under the form. Rails and the top rule come from Guides. It's built from Field, Input, Combobox, Input Group, File Upload, Progress, Guides, Shine Button and Button, with a CSS entrance on the header and your theme's tokens for every colour. For appraisers, dealers and any form that needs a fixed set of photos before a number.
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, category id and estimate, and the photo state holds the four files. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How do the four photo tiles work?
Each tile is its own File Upload with one file. Empty, the tile is a button named Front, Back, Marks or Signature. After a photo is accepted it shows that file's thumbnail, a check and a remove button. The line above the grid counts how many of the four are filled, and the bar tracks the same number. Submit asks for every empty tile in one message and moves focus to the first of them. A file over 8 MB, or a file that isn't a JPG, PNG or WebP, shows that message instead.
How is the category combobox labelled?
The word Category names the combobox, and focus can land on its input when the category is missing.
The input takes the id, and the label points to it with htmlFor.
What does the confirmation say, and who hears it?
It thanks the visitor by first name and repeats the photo count, the category and the estimate they sent, then the email, so they can spot a typo. It's a status region that takes focus when it appears, so a screen reader reads it at once, and "Send another request" brings back an empty form and puts focus on its heading. It doesn't promise a turnaround: the studio hours are the published ones under the form.
Are the email address and phone number real?
No. appraisals@hallowby.example uses the .example domain, which is reserved for examples, and +1 (555) 010-0148 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. The phone number and the dollar estimate keep their order in a right-to-left layout.
How does it fit on a phone?
The four tiles stay a two-by-two grid, each a short row rather than a square of the column, so the form still starts under the header. Category and estimate, then name and email, stack one per row below sm, and the submit button goes full width. The header fades up once on load. With reduced motion it simply appears.
Related
- Pro
File Attachments Contact
Support and feedbackA support request on a card in card with a file drop zone: up to four PDFs or images, a progress bar per file, an error row for a wrong type, and a form that waits for the files before it sends.
- Pro
Photo Access Repair Contact
Repairs and claimsA repair request for a housing association: three photo slots with thumbnails, two access switches, a visit window, and a what-happens-next panel that rewrites itself as you choose.
- Pro
Visitor Pass Contact
Visits and servicesA visitor pre-registration for an office building: pick a host from a directory, a weekday on a calendar and an arrival window, and get a check-in pass with a QR code.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Warranty Meter Contact
Repairs and claimsA warranty claim where the purchase date works out your cover on one line: a meter of the 24 months used, the month cover ends, and issue types that change with it.
- Pro
Document Checklist Contact
Finance and propertyA tax-return checklist as a card in a card: three ways of filing, eight documents with a tag that says which are needed, a bar of the needed ones ready and a switch to send the rest later.