VvFormGroup Component

The VvFormGroup component generates a complex form <input/>, <textarea/>, <select/> ready set of application elements, and comes with aesthetically flexible Vue props to globally control your instances and defaults via your application's app.vv.ts file.

VvFormGroup Defaults

Contributor:@oberocks

                    
                        <!-- ./src/components/SomeComponent.vue -->

                        <script setup lang="ts">

                            import VvFormGroup from './vv/forms/VvFormGroup.vue'
                            import VvInput from './vv/forms/VvInput.vue'

                        </script>

                        <template>
                        
                            <div class="flex flex-col gap-6">

                                <VvFormGroup
                                    label="Default State Example:"
                                    label-for="default-state-input"
                                >
                                    <VvInput id="default-state-input"/>
                                </VvFormGroup>

                                <VvFormGroup
                                    label="Help State Example:"
                                    label-for="help-state-input"
                                    :display-help="true"
                                    help-text="Example help state text"
                                >
                                    <VvInput id="help-state-input"/>
                                </VvFormGroup>

                                <VvFormGroup
                                    label="Error State Label:"
                                    label-for="error-state-input"
                                    label-text-color="error"
                                    :display-error="true"
                                    error-text="Example error state text"
                                >
                                    <VvInput id="error-state-input" color="error"/>
                                </VvFormGroup>

                                <VvFormGroup
                                    label="Success State Label:"
                                    label-for="success-state-input"
                                    label-text-color="success"
                                    :display-success="true"
                                    success-text="Example success state text"
                                >
                                    <VvInput id="success-state-input" color="success"/>
                                </VvFormGroup>

                            </div>
                        
                        </template>

The Result:

Default State Example:

Help State Example:

Example help state text

Error State Label:

Example error state text

Success State Label:

Example success state text