shadcn.io is not affiliated with official shadcn/ui
Repair Triage Contact Block for React
A repair report for a lettings agent: six category cells on shared hairlines, each with its published reply time, a callout with safety advice that follows the choice, and a form with a searchable list of homes.
Installation
Overview
A contact section for React with Base UI where a tenant reports a repair. A start-aligned header sits over a band of six Radio Group cells on shared hairlines that run from rail to rail (plumbing, heating, electrics, pests, locks and doors, something else), three across on a phone. Each cell shows an icon and the reply time the agent publishes for that trade. Under the band the form opens with the chosen category's reply time ("Heating: within 24 hours") and a callout that always holds a line of advice: the gas smell for heating, a burst pipe for plumbing, and an emergency reminder before anything is chosen. Both keep their space, so choosing another cell moves nothing. The form asks for your home (a Combobox you can search by flat or building), a name, an email and what has gone wrong, checks itself on submit, shows each problem under its field, focuses the first one, and turns into a confirmation in the same space. It's built from Radio Group, Combobox, Alert, Status, Field, Input, Textarea, Guides and Shine Button, with your theme's tokens for every colour. For lettings agents, housing associations and landlords with a repairs line.
FAQ
Are the reply times promises the form keeps?
No. They are the agent's published targets, written once in CATEGORIES at the top of the file, and the form never computes them or claims a server did. The confirmation says "published reply time" for that reason. Change the wording or the hours to match your own policy.
What is the callout for, and does it change layout?
It carries the safety advice that should not wait for a reply: leave the building and call from outside for a gas smell, turn off the stop tap for a burst pipe. Every category has its own line, and one more shows before anything is chosen, so the callout is never empty. All of them sit in one grid cell, so it keeps the height of the tallest and the page never jumps. The emergency number is fictional (555-0176): put your real line in PHONE.
How does the list of homes work?
The Combobox filters as you type, by flat or building, and has a clear button; it lists the homes in UNITS, and the form will not send until one is chosen from the list. On the Ark target (and the Vue, Svelte and Solid ports) the block filters a list collection by what you type; the Base UI and Radix targets both use Base UI's Combobox, which filters its own items, and React Aria filters by each row's text.
Can it be used with the keyboard and a screen reader?
Yes. The cells are one radio group named "What is the problem?": Tab enters it and the arrow keys move between cells. Choosing one is announced by a polite line that reads the reply time and the advice. If you send without a choice, the message appears in the reply line, focus moves to the first cell and the group is marked invalid.
Related
- 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
Outage priority triage Contact
Support and feedbackAn urgent hosting request with three priorities, one promised response at a time, and a phone line that appears only for an outage.
- Pro
Choose a Person Contact
Contact formsA band of four people, each a radio cell with initials, role and reply time, that addresses the form below it: a form that names its recipient, checks itself and confirms in place.
- Pro
Resolution Ladder Complaint Contact
Support and feedbackA complaint form in a card in card: four resolution cards one per row, each with its handling time, an incident date, an order number checked against its shape, and a switch that adds a Manager review badge.
- Pro
Tappable device repair Contact
Repairs and claimsA repair request for a phone shop where four buttons on a drawn phone pick the parts, and a model menu lists an example price for each.
- Pro
Live Count Property Search Contact
Finance and propertyA rental search whose match count falls as you narrow it: bedrooms, a rent range, must-haves and neighbourhood chips, three example homes beside it, then a form that checks itself and confirms in place.