VueVentus Docs

Appearance

VvFormGroup Component ​

The VvFormGroup 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 VvFormGroup Component installed by the vueventus CLI or vv-update CLI:

javascript
// ./src/components/SomeComponent.vue
import VvFormGroup from './vv/forms/VvFormGroup.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 VvFormGroup Component with:

javascript
import { VvFormGroup } 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: debug ​

Type: Boolean
Default: false

The VvFormGroup 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-form-group- prefixed HTML attributes.

Syntax ​

html
<VvFormGroup
    label="Debug Example:"
    label-for="debug-id"
    :debug="true"
>
    <VvInput id="debug-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Prop: displayError ​

Type: Boolean
Default: false

The VvFormGroup 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 ​

html
<VvFormGroup
    label="Example Label:"
    label-for="displayError-id"
    :display-error="true"
    error-text="Example error text"
>
    <VvInput id="displayError-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Example error text

Prop: displayHelp ​

Type: Boolean
Default: false

The VvFormGroup 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 ​

html
<VvFormGroup
    label="Example Label:"
    label-for="displayHelp-id"
    :display-help="true"
    help-text="Example help text"
>
    <VvInput id="displayHelp-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Example help text

Prop: displaySuccess ​

Type: Boolean
Default: false

The VvFormGroup 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 ​

html
<VvFormGroup
    label="Example Label:"
    label-for="displaySuccess-id"
    :display-success="true"
    success-text="Example success text"
>
    <VvInput id="displaySuccess-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Example success text

Prop: errorClasses ​

Type: String
Default: ""

The VvFormGroup Component errorClasses prop sets the classes for the component error text's parent element.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example error text

Prop: errorText ​

Type: String
Default: ""

The VvFormGroup Component errorText prop sets the text string for the component error text.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="errorText-id"
    :display-error="true"
    error-text="This is the error-text"
>
    <VvInput id="errorText-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

This is the error-text

Prop: errorTextColor ​

Type: String
Default: "error"

The VvFormGroup Component errorTextColor prop sets the error text's underlying VvEl component's text palette color.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

This is secondary color error text!

Typing for Downstream Component Instances ​

Coming Soon!

Prop: errorTextPalette ​

Type: String
Default: "default"

The VvFormGroup Component errorTextPalette prop sets the error text's underlying VvEl component's text palette value.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example text

Typing for Downstream Component Instances ​

Coming Soon!

Prop: errorTextSize ​

Type: String
Default: "sm"

The VvFormGroup Component errorTextSize prop sets the error text's underlying VvEl component's text size value.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example text

Typing for Downstream Component Instances ​

Coming Soon!

Prop: helpClasses ​

Type: String
Default: "opacity-75"

The VvFormGroup Component helpClasses prop sets the classes for the component help text's parent element.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example help text

Prop: helpText ​

Type: String
Default: ""

The VvFormGroup Component helpText prop sets the text string for the component help text.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="helpText-id"
    :display-help="true"
    help-text="This is the help-text"
>
    <VvInput id="helpText-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

This is the help-text

Prop: helpTextColor ​

Type: String
Default: "default"

The VvFormGroup Component helpTextColor prop sets the help text's underlying VvEl component's text palette color.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

This is secondary color help text!

Typing for Downstream Component Instances ​

Coming Soon!

Prop: helpTextPalette ​

Type: String
Default: "default"

The VvFormGroup Component helpTextPalette prop sets the help text's underlying VvEl component's text palette value.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example text

Typing for Downstream Component Instances ​

Coming Soon!

Prop: helpTextSize ​

Type: String
Default: "sm"

The VvFormGroup Component helpTextSize prop sets the help text's underlying VvEl component's text size value.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example text

Typing for Downstream Component Instances ​

Coming Soon!

Prop: label ​

Type: String
Required: true

The VvFormGroup 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 VvFormGroup Component.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="label-id"
>
    <VvInput id="label-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Prop: labelFor ​

Type: String
Required: true

The VvFormGroup 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 VvFormGroup Component.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="labelFor-id"
>
    <VvInput id="labelFor-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Prop: labelClasses ​

Type: String
Default: "capitalize"

The VvFormGroup Component labelClasses prop sets the component's returned label element's class value.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="labelClasses-id"
    label-classes="uppercase"
>
    <VvInput id="labelClasses-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Prop: labelTextColor ​

Type: String
Default: "default"

The VvFormGroup Component labelTextColor prop sets the component's returned label's underlying VvEl component's text palette color value.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="labelTextColor-id"
    label-text-color="primary"
>
    <VvInput id="labelTextColor-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Typing for Downstream Component Instances ​

Coming Soon!

Prop: labelTextPalette ​

Type: String
Default: "default"

The VvFormGroup Component labelTextPalette prop sets the label text's underlying VvEl component's text palette value.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="labelTextPalette-id"
    label-text-palette="default"
>
    <VvInput id="labelTextPalette-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Typing for Downstream Component Instances ​

Coming Soon!

Prop: labelTextSize ​

Type: String
Default: "md"

The VvFormGroup Component labelTextSize prop sets the label text's underlying VvEl component's size value.

Syntax ​

html
<VvFormGroup
    label="Example 2XL Label:"
    label-for="labelTextSize-id"
    label-text-palette="default"
    label-text-size="2xl"
>
    <VvInput id="labelTextSize-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Typing for Downstream Component Instances ​

Coming Soon!

Prop: slotParentClasses ​

Type: String
Default: "flex items-center gap-1"

The VvFormGroup Component slotParentClasses prop sets the component's returned label's underlying VvEl component's text palette color value.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="slotParentClasses-id"
    slot-parent-classes="flex items-center gap-1"
>
    <VvInput id="slotParentClasses-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

Prop: successClasses ​

Type: String
Default: ""

The VvFormGroup Component successClasses prop sets the classes for the component success text's parent element.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example success text

Prop: successText ​

Type: String
Default: ""

The VvFormGroup Component successText prop sets the text string for the component success text.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="successText-id"
    :display-success="true"
    success-text="This is the success-text"
>
    <VvInput id="successText-id" placeholder="Example VvInput"/>
</VvFormGroup>

Result ​

This is the success-text

Prop: successTextColor ​

Type: String
Default: "success"

The VvFormGroup Component successTextColor prop sets the success text's underlying VvEl component's text palette color.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

This is secondary color success text!

Typing for Downstream Component Instances ​

Coming Soon!

Prop: successTextPalette ​

Type: String
Default: "default"

The VvFormGroup Component successTextPalette prop sets the success text's underlying VvEl component's text palette value.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example text

Typing for Downstream Component Instances ​

Coming Soon!

Prop: successTextSize ​

Type: String
Default: "sm"

The VvFormGroup Component successTextSize prop sets the success text's underlying VvEl component's text size value.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Example text

Typing for Downstream Component Instances ​

Coming Soon!

Prop: wrapperClasses ​

Type: String
Default: "w-full flex flex-col space-y-1"

The VvFormGroup Component wrapperClasses prop sets the classes for the component's outermost wrapping/parent element.

Syntax ​

html
<VvFormGroup
    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"/>
</VvFormGroup>

Result ​

Slot: #default ​

The VvFormGroup Component has a standard #default Vue slot to insert child elements/nodes into the component.

Syntax ​

html
<VvFormGroup
    label="Example Label:"
    label-for="example-slot-id"
>
    <VvInput id="example-slot-id" placeholder="Via #default slot"/>
</VvFormGroup>

Result ​

Released under the MIT License

Copyright © 2022 Matt McT LLC