shadcn.io is not affiliated with official shadcn/ui
Skill Tags Internship Contact Block for React
An internship application with no frame: a band of three start seasons, a graduation date field, a weeks stepper and a tags field for skills with one-tap suggestions, checked on submit and confirmed in place.
Installation
Overview
An internship application section for React with Base UI, laid straight on the page: a centred header, then a band between two rules that asks when you could start (summer, autumn or spring, as three tiles that fill with the text colour when chosen), then a narrow column of fields: a name and an email, the university or college, the graduation date in a date field, the weeks you could give in a number input (8 to 16, with steppers and the arrow keys), and the skills you bring in a tags field. Type a skill and press Enter, or tap one of eight suggestions (a pressed suggestion is a tag, tapping it again takes the tag off); up to six, and the tags wrap onto as many lines as they need. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid application turns into a confirmation in the same space, which takes focus and repeats the season, the weeks, the graduation date and the skills. The rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Segment Group, Date Input, Number Input, Tags Input, Field, Input, Button, Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For design studios, agencies, labs and any team that takes interns by application.
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 a call to your applicant system or inbox: details holds the season, name, email, university, graduation date and weeks, and skills holds the tags.
How do the skills work?
Type a skill and press Enter (or a comma) to add it; pasting a comma-separated list adds several. A skill that is already there (in any letter case), empty, or longer than 30 characters is turned down with a line saying why, and the sixth tag fills the field: the input becomes read-only and the unpicked suggestions are unavailable until you remove one. The suggestions are fixed example data in SUGGESTIONS: change them to the skills your role asks for.
How is the graduation date checked?
The date field has month, day and year segments you type into or step with the arrow keys. On submit an empty or incomplete date asks for all three, and a day before today is turned down ("That day has passed"). Today is read when the form is submitted, not while the page renders, so no year is written into the file and the server's render never goes stale.
Why does no season start chosen?
So the choice is the applicant's: submitting without one asks "Choose when you could start" and moves focus to the first tile. The tiles are one Segment Group, so the arrow keys move between them and the chosen one fills with the foreground colour, never the primary colour. The months under each season are example data in SEASONS.
How is the weeks field labelled and limited?
The label names it, and the stepper stops at 8 and 16. A typed number outside that is pulled back into range when the field loses focus, and a cleared field asks for a number from 8 to 16 on submit.
The input takes the id directly.
How does it fit on a phone?
The three season tiles stay in a row (their months wrap to two lines), the fields go one per row below sm, the tags wrap and the suggestions flow onto as many rows as they need, and the submit button goes full width, so nothing scrolls sideways at 320 pixels. The header fades up once on load; with reduced motion it simply appears.
Related
- Pro
Live Matching Mentorship Contact
Calls and meetingsA mentor request that ranks as you choose: up to three focus areas as toggles re-rank three mentors, shown as radio rows with their overlap, beside a form that checks itself and confirms in place.
- Pro
Eligibility Checklist Scholarship Contact
ApplicationsA scholarship application on a card in card: four eligibility criteria as ruled checkbox rows with a verdict line, an essay with a word count that fills a bar toward its minimum, and a form that checks itself and confirms in place.
- Pro
Payment Schedule Course Contact
ApplicationsA course enrolment on shared hairlines: three programmes as choice cards, a plan switch that rewrites a payment schedule table to the cent, and a form that checks itself and confirms in place.
- Pro
Centered Seat-Capped Invite CTA
Urgency and limitsA centred card-in-card CTA with a tags input of teammate emails that stops at the seats a plan has left, ten seat dots that fill as you add chips and a Shine Button that counts the invites.
- Pro
Minimal Contact Form
Contact formsThe calmest contact form, for a mail client: a centred heading and three fields on the page column with inline validation, a message counter and a one-line thank-you.
- Pro
Animal Cards Adoption Contact
ApplicationsAn adoption application that starts with four animal cells on shared hairlines and a slider for the hours a home is empty, with a list of the animals that suit you narrowing beside the form.