shadcn.io is not affiliated with official shadcn/ui
Import Data Paste to Fill Form Block for Vue
A new-hire form that fills from a pasted JSON object or CSV row, with a report of every key: filled, not on this form, or refused and why, and an Imported badge on filled fields.
Installation
Overview
Fill a form from a row you already have with this import data form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner, and two cells inside: a paste cell first and the new-hire form beside it. The Textarea takes one JSON object or a CSV header line and one row, and two sample buttons paste an example of each. Fill form really parses what is there, with JSON.parse or a split on commas that honours quotes, matches keys such as full_name, work_email and start_date to the five fields, and lists what it did in a report, one line per key with a glyph and words: filled, not on this form (badge_id), or refused with the reason (an email that is not an address, a date that has passed, a team that does not exist). Filled fields carry an Imported Badge and stay editable; editing one takes its badge off. Save checks the whole form and puts focus on the first problem. It's built from Textarea, Input, Select, Badge, Field, Button, Shine Button and Guides. For onboarding, HR and CRM records, and any form that people fill from a spreadsheet.
FAQ
Which keys does the paste understand?
Keys are compared in lower case with punctuation removed, so Full Name, full_name and fullName are the same. ALIASES maps them to the form's fields: name, email (also work_email), date (start_date, start), team (department) and title (job_title, role). Add a key there and the report and the form follow. A team is matched by its label or its value, in any case.
Why was a value refused instead of filled anyway?
A value that fails the form's own rule would put a known problem in a field the person did not type. The report names the key and the reason, the field stays as it was, and you can type the value yourself. Valid keys in the same paste are still filled.
How is a CSV row read?
The first line is the header and the second is the row; a quoted cell may hold commas and a doubled quote stands for one. Only the first row is used. For many rows, split the work into a table and a bulk import, which this single-record form is not.
How does it work with a keyboard and a screen reader?
Everything is a labelled control in reading order: paste, the buttons, the report, then the form. The report is a scrollable region you can focus, each line begins with a hidden "Filled", "Ignored" or "Refused", and the foot, the one live region, gives the totals. The Imported badge is hidden from assistive technology when it is not shown.
What stays local, and how do I connect it for real?
The paste is parsed in the tab and nothing is read from a file or sent: the foot says "Saved in this demo. Nothing sent." In your app, parse on the server as well, validate with the same rules, and keep the report for the person. A file picker would feed the same readPaste function.