shadcn.io is not affiliated with official shadcn/ui
Outage priority triage Contact Block for React
An urgent hosting request with three priorities, one promised response at a time, and a phone line that appears only for an outage.
Installation
Overview
An urgent request for Pagerfield Hosting, a hosting provider, for React with Base UI. Three priorities sit in a band: P1 Outage (15 min), P2 Degraded (2 hours) and P3 Question (1 day). One promise shows at a time. P1 adds an on-call Status and a phone link before the form. The other two keep that row and say the phone is for outages. A rule at the start of the form is thicker for an outage and hairline for a question, with the padding unchanged. Name, email and a message check themselves, then a confirmation repeats the priority and its promise. The desk's address closes the block. The page's rails and top rule come from the Guides spine. It's built from Segment Group, Status, Item, Guides, Field, Input, Textarea, Shine Button and Button, with a CSS transition on the header and your theme's tokens for every colour. For hosting desks and anyone who triages a first message by how urgent it is.
FAQ
What does each priority promise?
P1 Outage: "We answer the phone within 15 minutes, day or night." P2 Degraded: "A person writes within 2 hours on a business day." P3 Question: "We reply within one business day." The band always shows all three names. The sentence under the band is the one for the priority that's on, in a live region, so a screen reader hears the change. The block opens on P2.
When does the phone button show?
Only for P1. It sits in a row that keeps its height for the other two priorities, which instead read that the phone line is for outages and this one is answered in writing. The button is a link to the desk's number, not a second submit. Next to it, "On call now" is real text. The status dot beside those words is decorative.
How does the form's tone change?
A rule on the start edge of the form. P1 is the thickest, P2 is thinner, P3 is a hairline in the border colour. The padding beside the rule does not change, so the fields don't shift. Nothing in the block uses a warning or a danger colour for the priority.
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 priority, the name, the email and the message. The confirmation repeats the priority's code, its name and the promise already on the page. It does not invent a ticket number.
How does the form check what's typed?
The form has noValidate. On submit it requires a name, an email address with an @ and a domain, and a message. The priority always has a value, because choosing again cannot clear it. Each problem appears under its field and focus moves to the first one.
Are the email address and phone number real?
No. oncall@pagerfield.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0107 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS. The phone number keeps its order in a right-to-left layout. Hours are text: outages day and night, writing on weekdays.
Related
- Pro
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
- Pro
Request a Callback Contact
Calls and meetingsA callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
- 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
Symptom Triage Contact
Visits and servicesA visit request for a family clinic that opens on body-area toggles, shows an emergency notice in reserved space when chest is chosen, and takes an insurer you can type or pick.
- 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
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.