shadcn.io is not affiliated with official shadcn/ui
Resume Drop Contact Block for Solid
A robotics hiring form that starts with a single PDF dropzone, then a role combobox, a start date and an optional LinkedIn field.
Installation
Overview
A resume form for Solid with Ark UI, for Cinderfall Robotics. A centred header sits over a framed card, and the dropzone is the first field. File Upload accepts one PDF up to 5 MB and, once a file is in, shows it as a chip with its name, its size and a remove button. A Combobox picks the role, a Date Picker picks the first day the visitor can start, and an Input Group shows linkedin.com/in/ in front of an optional profile slug. Name and email follow. Submitting checks every field, shows each problem under its control and moves focus to the first one. A valid request confirms in the same space and repeats the file name, the role and the date. It's built from Field, Input, File Upload, Combobox, Date Picker, Input Group, Frame, Guides, Shine Button and Button, with a CSS entrance on the header and your theme's tokens for every colour. For hiring pages that should take a resume before they ask anything else.
FAQ
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 name, email, role id, start date and optional profile slug, and the file state holds the PDF. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
What can the dropzone accept?
One PDF, up to 5 MB. Until a file is chosen, the dropzone reads Drop a resume, or choose a PDF. After one is accepted, that dropzone is replaced by a chip with the file name, the size and a remove button. Removing the chip brings the dropzone back. A second file, a file that isn't a PDF, or a file over 5 MB shows that message under the field. Submit with nothing attached asks for the PDF and moves focus to the dropzone.
How is the role combobox labelled?
The word Role names the combobox, and focus can land on its input when the role is missing. The combobox sets the input's id, and the label points at that input.
Which days can be a start date?
The calendar closes Saturdays, Sundays and any day before today, read from the visitor's clock. Today itself can be chosen. Submit also refuses a closed day if one is already in the field. The confirmation speaks the date as a weekday and a month, from the stored year-month-day text.
Is the LinkedIn field required?
No. The label says optional. Empty, it passes. Filled, it has to be 3 to 40 characters of letters, numbers and hyphens, the part that follows linkedin.com/in/. The addon is the prefix, so the visitor doesn't type it. The confirmation mentions the profile only when they filled it in.
How does it fit on a phone?
The card stays a single column. The LinkedIn prefix is set smaller so linkedin.com/in/ fits at 320 pixels. Name and email stack below sm, and the submit button goes full width. The header fades up once on load. With reduced motion it simply appears. hello@cinderfall.example and +1 (555) 010-0136 are fictional. Replace EMAIL, PHONE, PHONE_HREF and HOURS with yours.