FreeComponent · Forms
Contact Form
Accessible Vue 3 contact form with inline validation, a live character counter and loading, success and error states. Tailwind CSS, dark mode.
by Vueplay
Vue form components
Good forms are mostly about details: visible labels, clear errors and inputs that behave the way people expect. These Vue 3 form components include inputs, selects, checkboxes, switches and complete form layouts, styled with Tailwind CSS 4.
Values bind with v-model through defineModel(), and each field has room for hints and error messages. They support class-based dark mode and have no dependencies besides vue, so they fit any validation approach.
Free
FreeComponent · Forms
File Dropzone
Drag-and-drop file upload zone for Vue 3 with click to browse, type and size validation, image previews and progress bars. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Forms
Multi-Step Form
Config-driven Vue 3 multi-step form wizard with a step indicator, per-step validation, back/next, a review step and a submit event. Tailwind CSS.
by Vueplay
Good to know
Building forms that hold up
- Always pair inputs with labels
- Use a <label> tied to the input with for and id, and generate ids with useId() in Vue 3.5+ so they stay stable during SSR. Placeholders are not a substitute for labels.
- Wire up error messages
- Link error text to the field with aria-describedby and set aria-invalid="true" when it fails. Show errors after blur or submit rather than on every keystroke.
- Use the right input types
- type="email", inputmode="numeric" and autocomplete attributes give mobile users the right keyboard and let browsers autofill. They are free usability wins.
- Keep validation outside the component
- Let field components accept an error prop and stay unaware of validation rules. You can then use native constraints, a schema library or server errors without changing them.
FAQ
Questions
Do these form components work with validation libraries?
Yes. They use v-model and accept error messages as props, so they work with native validation, schema libraries or errors returned from your API.
How do I install a form component?
Every item is a plain Vue 3 single-file component with no dependencies besides vue. Install it with npm from its vueplay.com/npm tarball URL, or copy the source straight into your project.