Beautifully styled form components that integrate with DynamicForms vue-forms package
A collection of Vuetify-based input components designed to work with @dynamicforms/vue-forms for building powerful, reactive form interfaces.
@dynamicforms/vuetify-inputs provides the visual layer to complement the logic-focused @dynamicforms/vue-forms library. Together, they offer a complete solution for creating advanced form interfaces with robust validation, state management, and beautiful styling.
The components in this library follow Vuetify's design patterns while adding advanced functionality like dynamic option loading, file uploads with progress indication, and seamless integration with the DynamicForms ecosystem.
<template>
<div>
<df-select
:control="form.fields.country"
:choices="countries"
label="Select a country"
/>
<df-text-area
:control="form.fields.description"
label="Description"
:rows="5"
:max-rows="10"
/>
<pre>{{ form.value }}</pre>
</div>
</template>
<script setup>
import { Group, Field } from '@dynamicforms/vue-forms';
import { DfSelect, DfTextArea } from '@dynamicforms/vuetify-inputs';
// Create a form with fields
const form = new Group({
country: Field.create({ value: null }),
description: Field.create({ value: '' })
});
// Define countries for select
const countries = [
{ id: 'us', text: 'United States' },
{ id: 'ca', text: 'Canada' },
{ id: 'uk', text: 'United Kingdom' },
// more countries...
];
</script>Ready to get started? Check out the Getting Started guide or dive into the Examples for more detailed usage patterns.