shadcn.io is not affiliated with official shadcn/ui
Warranty Meter Contact Block for Svelte
A 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.
Installation
Overview
A warranty claim for Svelte with Ark UI. A start-aligned header sits over a band between two rules: a date field for the purchase at the start, and at the end a one-line meter that names your cover ("Covered until June 2028", "Out of warranty since March 2026"), moves its dot from neutral to the success or warning colour, and fills a bar with the months used out of 24. Under the band, the claim: the appliance, its serial number (checked against a pattern, like KW-4F7A-2291), an issue type whose options change with the cover, an optional note, and your name and email. It's built from Date Input, Progress, Status, Select, Field, Input, Textarea, Guides, Shine Button and Button.
FAQ
How is the cover worked out?
Cover runs 24 months from the purchase date. The meter counts whole months from that date to today, never more than 24, and names the month the cover ends; a date still to come reads "That date is still to come" and is a problem on submit. Change MONTHS to match your terms. The server's HTML never depends on a clock: today is read from the browser after the page has loaded, and the meter stays empty until you enter a date.
Why do the issue options change?
In cover, you choose what went wrong (it stopped working, it leaks or makes a noise, a part broke, damaged on delivery) and the line under the field says repairs cost nothing. Out of cover, you choose what you need (a repair quote, a spare part, a service visit) and the line says a quote comes first. If the cover changes after you chose, the choice starts again so it can't be one that no longer applies.
How is the serial number checked?
It is turned into capitals as you type and must match KW, four letters or numbers and four digits, joined by dashes, such as KW-4F7A-2291. The field has the same pattern and a hint, and the check runs when you leave it and on submit. The example numbers aren't real.
Where does the claim go?
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 a call to your service desk: details holds the date, appliance, serial, issue, note, name and email. The confirmation repeats the appliance, serial, issue and the cover.
How are the selects labelled?
The label above each names the select's button for screen readers, and focus can land on it when the choice is missing. Each field takes the select's id, so its label and the hidden native select share it.
How does it fit on a phone?
Below lg the band stacks: the date field, then the meter under a rule. The meter's text and its month count wrap onto two lines at the narrowest widths, the appliance and serial number go one per row, and the button goes full width. The dates and counts keep their order in a right-to-left layout.