VueVentus DocsVvQuadFormGroup Component
The VvQuadFormGroup Component provides a variety of props and config module based settings to make a variety of element configurations for any element itself or as a parent, child, or sibling element with color contextual relations with other contextual elements.
Import
To import a VvQuadFormGroup Component installed by the vueventus CLI or vv-update CLI:
// ./src/components/SomeComponent.vue
import VvQuadFormGroup from './vv/forms/VvQuadFormGroup.vue'TIP
CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.
Alternatively, you can install the raw library VvQuadFormGroup Component with:
import { VvQuadFormGroup } from '@obewds/vueventus'TIP
Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.
CLI or Raw?
The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.
Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).
Prop: bottomSlotClasses
Type: String
Default: ""
The VvQuadFormGroup Component bottomSlotClasses prop controls the parent element classes for whatever bottom slot content is passed through.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="bottomSlotClasses-id"
bottom-slot-classes="text-2xl"
>
<VvInput id="bottomSlotClasses-id" placeholder="Example VvInput"/>
<template v-slot:bottom>
Bottom Slot
</template>
</VvQuadFormGroup>Result
Prop: bottomWrapperClasses
Type: String
Default: "flex justify-between gap-3"
The VvQuadFormGroup Component bottomWrapperClasses prop sets the help/error/success text and bottom slot wrapping element classes.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="bottomWrapperClasses-id"
:display-help="true"
help-text="Helpful text..."
bottom-wrapper-classes="flex justify-between gap-3 border-b"
>
<VvInput id="bottomWrapperClasses-id" placeholder="Example VvInput"/>
<template v-slot:bottom>
Bottom Slot
</template>
</VvQuadFormGroup>Result
Prop: debug
Type: Boolean
Default: false
The VvQuadFormGroup Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-quad-form-group- prefixed HTML attributes.
Syntax
<VvQuadFormGroup
label="Debug Example:"
label-for="debug-id"
:debug="true"
>
<template v-slot:top>
Top
</template>
<VvInput id="debug-id" placeholder="Example VvInput"/>
<template v-slot:bottom>
Bottom
</template>
</VvQuadFormGroup>Result
Prop: displayError
Type: Boolean
Default: false
The VvQuadFormGroup Component displayError prop works in conjunction with the errorText prop to display the markup containing error text as well as error classes and colors.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="displayError-id"
:display-error="true"
error-text="Example error text"
>
<VvInput id="displayError-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: displayHelp
Type: Boolean
Default: false
The VvQuadFormGroup Component displayHelp prop works in conjunction with the helpText prop to display the markup containing error text as well as error classes and colors.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="displayHelp-id"
:display-help="true"
help-text="Example help text"
>
<VvInput id="displayHelp-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: displaySuccess
Type: Boolean
Default: false
The VvQuadFormGroup Component displaySuccess prop works in conjunction with the successText prop to display the markup containing error text as well as error classes and colors.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="displaySuccess-id"
:display-success="true"
success-text="Example success text"
>
<VvInput id="displaySuccess-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: errorClasses
Type: String
Default: ""
The VvQuadFormGroup Component errorClasses prop sets the classes for the component error text's parent element.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="errorClasses-id"
:display-error="true"
error-classes="text-2xl"
error-text="Example error text"
>
<VvInput id="errorClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: errorText
Type: String
Default: ""
The VvQuadFormGroup Component errorText prop sets the text string for the component error text.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="errorText-id"
:display-error="true"
error-text="This is the error-text"
>
<VvInput id="errorText-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: errorTextColor
Type: String
Default: "error"
The VvQuadFormGroup Component errorTextColor prop sets the error text's underlying VvEl component's text palette color.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="errorTextColor-id"
:display-error="true"
error-text-color="secondary"
error-text="This is secondary color error text!"
>
<VvInput id="errorTextColor-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: errorTextPalette
Type: String
Default: "default"
The VvQuadFormGroup Component errorTextPalette prop sets the error text's underlying VvEl component's text palette value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="errorTextPalette-id"
:display-error="true"
error-text-palette="default"
error-text="Example text"
>
<VvInput id="errorTextPalette-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: errorTextSize
Type: String
Default: "sm"
The VvQuadFormGroup Component errorTextSize prop sets the error text's underlying VvEl component's text size value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="errorTextSize-id"
:display-error="true"
error-text-size="2xl"
error-text="Example text"
>
<VvInput id="errorTextSize-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: helpClasses
Type: String
Default: "opacity-75"
The VvQuadFormGroup Component helpClasses prop sets the classes for the component help text's parent element.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="helpClasses-id"
:display-help="true"
help-classes="text-2xl"
help-text="Example help text"
>
<VvInput id="helpClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: helpText
Type: String
Default: ""
The VvQuadFormGroup Component helpText prop sets the text string for the component help text.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="helpText-id"
:display-help="true"
help-text="This is the help-text"
>
<VvInput id="helpText-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: helpTextColor
Type: String
Default: "default"
The VvQuadFormGroup Component helpTextColor prop sets the help text's underlying VvEl component's text palette color.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="helpTextColor-id"
:display-help="true"
help-text-color="secondary"
help-text="This is secondary color help text!"
>
<VvInput id="helpTextColor-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: helpTextPalette
Type: String
Default: "default"
The VvQuadFormGroup Component helpTextPalette prop sets the help text's underlying VvEl component's text palette value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="helpTextPalette-id"
:display-help="true"
help-text-palette="default"
help-text="Example text"
>
<VvInput id="helpTextPalette-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: helpTextSize
Type: String
Default: "sm"
The VvQuadFormGroup Component helpTextSize prop sets the help text's underlying VvEl component's text size value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="helpTextSize-id"
:display-help="true"
help-text-size="2xl"
help-text="Example text"
>
<VvInput id="helpTextSize-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: label
Type: String
Required: true
The VvQuadFormGroup Component label prop sets the label text string for the component.
Required Prop
The label prop is a required prop for each instance of the VvQuadFormGroup Component.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="label-id"
>
<VvInput id="label-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: labelFor
Type: String
Required: true
The VvQuadFormGroup Component labelFor prop sets the component's returned label for attribute value, so you can match that with a slotted VvInput component for example, to properly associate the label to the input for both semantics and usability advantages.
Required Prop
The labelFor prop is a required prop for each instance of the VvQuadFormGroup Component.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="labelFor-id"
>
<VvInput id="labelFor-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: labelClasses
Type: String
Default: "capitalize"
The VvQuadFormGroup Component labelClasses prop sets the component's returned label element's class value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="labelClasses-id"
label-classes="uppercase"
>
<VvInput id="labelClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: labelTextColor
Type: String
Default: "default"
The VvQuadFormGroup Component labelTextColor prop sets the component's returned label's underlying VvEl component's text palette color value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="labelTextColor-id"
label-text-color="primary"
>
<VvInput id="labelTextColor-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: labelTextPalette
Type: String
Default: "default"
The VvQuadFormGroup Component labelTextPalette prop sets the label text's underlying VvEl component's text palette value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="labelTextPalette-id"
label-text-palette="default"
>
<VvInput id="labelTextPalette-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: labelTextSize
Type: String
Default: "md"
The VvQuadFormGroup Component labelTextSize prop sets the label text's underlying VvEl component's size value.
Syntax
<VvQuadFormGroup
label="Example 2XL Label:"
label-for="labelTextSize-id"
label-text-palette="default"
label-text-size="2xl"
>
<VvInput id="labelTextSize-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: slotParentClasses
Type: String
Default: "flex items-center gap-1"
The VvQuadFormGroup Component slotParentClasses prop sets the component's returned label's underlying VvEl component's text palette color value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="slotParentClasses-id"
slot-parent-classes="flex items-center gap-1"
>
<VvInput id="slotParentClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: successClasses
Type: String
Default: ""
The VvQuadFormGroup Component successClasses prop sets the classes for the component success text's parent element.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="successClasses-id"
:display-success="true"
success-classes="text-2xl"
success-text="Example success text"
>
<VvInput id="successClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: successText
Type: String
Default: ""
The VvQuadFormGroup Component successText prop sets the text string for the component success text.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="successText-id"
:display-success="true"
success-text="This is the success-text"
>
<VvInput id="successText-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: successTextColor
Type: String
Default: "success"
The VvQuadFormGroup Component successTextColor prop sets the success text's underlying VvEl component's text palette color.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="successTextColor-id"
:display-success="true"
success-text-color="secondary"
success-text="This is secondary color success text!"
>
<VvInput id="successTextColor-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: successTextPalette
Type: String
Default: "default"
The VvQuadFormGroup Component successTextPalette prop sets the success text's underlying VvEl component's text palette value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="successTextPalette-id"
:display-success="true"
success-text-palette="default"
success-text="Example text"
>
<VvInput id="successTextPalette-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: successTextSize
Type: String
Default: "sm"
The VvQuadFormGroup Component successTextSize prop sets the success text's underlying VvEl component's text size value.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="successTextSize-id"
:display-success="true"
success-text-size="2xl"
success-text="Example text"
>
<VvInput id="successTextSize-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: textParentClasses
Type: String
Default: "flex justify-between gap-3"
The VvQuadFormGroup Component textParentClasses prop sets the classes for the parent element that groups the component's help/success/error text below the default slot and as a sibling for element that wraps any bottom slot content passed in.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="textParentClasses-id"
:display-help="true"
help-text="Helpful text..."
text-parent-classes="w-full border-b"
>
<VvInput id="textParentClasses-id" placeholder="Example VvInput"/>
<template #bottom>
<span class="whitespace-nowrap">Bot Slot</span>
</template>
</VvQuadFormGroup>Result
Prop: topSlotClasses
Type: String
Default: "flex justify-between gap-3"
The VvQuadFormGroup Component topSlotClasses prop controls the parent element classes for whatever top slot content is passed through.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="topSlotClasses-id"
top-slot-classes="text-2xl"
>
<template v-slot:top>
Top Slot
</template>
<VvInput id="topSlotClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: topWrapperClasses
Type: String
Default: "flex justify-between items-end gap-3"
The VvQuadFormGroup Component topWrapperClasses prop sets the label and top slot wrapping element classes.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="topWrapperClasses-id"
top-wrapper-classes="flex justify-between gap-3 border-t"
>
<template v-slot:top>
Top Slot
</template>
<VvInput id="topWrapperClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Prop: wrapperClasses
Type: String
Default: "w-full flex flex-col space-y-1"
The VvQuadFormGroup Component wrapperClasses prop sets the classes for the component's outermost wrapping/parent element.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="wrapperClasses-id"
wrapper-classes="w-1/2 grid grid-cols-1 gap-3"
>
<VvInput id="wrapperClasses-id" placeholder="Example VvInput"/>
</VvQuadFormGroup>Result
Slot: #bottom
The VvQuadFormGroup Component has a #bottom Vue slot to insert child elements/nodes into the component below the default slot and sharing a parent/wrapper element with the component's help/error/success text markup element(s).
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="example-bottom-slot-id"
:display-help="true"
help-text="Helpful text..."
>
<VvInput id="example-bottom-slot-id"/>
<template v-slot:bottom>
Bottom Slot
</template>
</VvQuadFormGroup>Result
Slot: #default
The VvQuadFormGroup Component has a standard #default Vue slot to insert child elements/nodes into the component.
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="example-slot-id"
>
<VvInput id="example-slot-id" placeholder="Via #default slot"/>
</VvQuadFormGroup>Result
Slot: #top
The VvQuadFormGroup Component has a #top Vue slot to insert child elements/nodes into the component above the default slot and sharing a parent/wrapper element with the component's label markup element(s).
Syntax
<VvQuadFormGroup
label="Example Label:"
label-for="example-top-slot-id"
>
<template v-slot:top>
Top Slot
</template>
<VvInput id="example-top-slot-id"/>
</VvQuadFormGroup>