shadcn.io is not affiliated with official shadcn/ui
Template Fill Support Ticket Form Block for Radix UI
A new-ticket form with four templates (Blank, Bug report, Feature request, Question) that fill the subject, category, priority and message, ask before replacing what you typed, and offer Undo template.
Installation
Overview
Start from a template without losing your work with this template fill form for React with Radix UI. A compact header sits over a hairline frame with a plus mark on each corner. A list of four templates, each a name and a line, sits at the start; choosing one fills the Subject (Input), Category and Priority (Native Selects) and Message (Textarea) of a support ticket. If you have already typed something that is not the template's own text, a bar above the fields asks "Replace what you typed?" with Replace and Keep, and nothing changes until you answer. After a fill the bar offers "Undo template", which puts the earlier values back, and the bar has a reserved space so the fields never move. On a phone the templates become a sideways row of chips above the form. Create ticket checks the subject and the message, names the first problem in the foot and focuses it. The Shine Button is the only colored control. It's built from Input, Native Select, Textarea, Field, Button, Shine Button and Guides, with a CSS entrance only. For help desks, issue trackers, canned replies and any form people fill from a pattern.
FAQ
How do I add or change a template?
Edit TEMPLATES: each has an id, a name, a line and the four values it writes. The first, Blank, is the baseline for "what you typed". Categories and priorities come from CATEGORIES and PRIORITIES.
When does it ask before replacing?
When the form differs from the current template's own values, which typedOver works out field by field. A fresh form, or one still holding the previous template's text, is replaced without asking; a form you changed is not touched until you press Replace, and Keep leaves it and returns the selection to the current template.
What does Undo template restore?
The values from just before the last fill. It is offered only until you type again: an edit clears it, because restoring then would throw away your later work.
How does it look on a phone?
The templates are radio chips in a row that scrolls sideways, then the form; the bar and the fields share the same reserved space as on desktop. The foot is pinned to the bottom of the screen and the Create ticket button is full width.