shadcn.io is not affiliated with official shadcn/ui
Tappable device repair Contact Block for Svelte
A 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.
Installation
Overview
A repair request for Screenwright Repairs, built for Svelte with Ark UI. A drawn phone in a Frame carries four real buttons in a Toggle Group: screen, battery, camera and charging port. Chosen parts highlight on the drawing and in a Data List of example prices for the model in the Select (Pocket S, Pocket Pro, Fold S or Mini). On a wide screen the drawing sits at the start with the four parts as a list of buttons beside the phone; the drawing and its list come first in the source and on a phone, where the phone is short and the parts become a two-by-two grid above the form. Submitting checks that at least one part, a name and an email are set, then confirms in the form's cell with the model, the parts and the example total. It's built from Field, Input, Select, Toggle Group, Data List, Frame, Guides, Shine Button and Button.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with your own call. The request is the model id, the chosen part ids, the name and the email. Prices are examples in MODELS; they are not a quote a server has accepted.
How do the parts on the phone work?
The drawing is decorative. The four buttons are a multi-select Toggle Group, so each part can be on or off, and a chosen part uses the foreground colour. The same choice fills that part of the drawing and marks its row in the price list. The example total adds the chosen prices and is a status line, so a change can be announced. At least one part is required; the message sits under the buttons and focus moves there.
How is the model select labelled?
The label above it names the select, and the prices follow the model that is showing. Pocket S is selected to start. The model's Field takes the select's id, so its label and the hidden native select share it, and focusing that select passes focus to the button.
How does the form check what's typed?
The form has noValidate. On submit, problems checks that a part is chosen, that a name is present, and that the email has an @ and a domain. Each problem appears under its field with an icon, and focus moves to the first one. Choosing a part, or typing, clears that message. The model is always one of the four.
What does the confirmation say?
It thanks the visitor by first name and repeats the model, the chosen part names and the example total. It's a status region that takes focus, and "Repair another phone" clears the parts and the fields and puts focus on the form heading. The line under the button is where the one-business-day reply lives.
How does it fit on a phone?
The drawing is placed first, then the form. The phone drawing is short, and the four parts sit in a two-by-two grid under it instead of over the drawing. Name and email go one per row below sm, and the submit button goes full width. Under 360 pixels the contact labels shrink to their icons. The header fades up once; with reduced motion it simply appears. desk@screenwright.example and +1 (555) 010-0162 are fictional, and every price is an example.