Appearance

VfGroup ​

Basic ​

VfGroup wraps related elements together. By default it is flat — children merge directly into the parent form's data model without creating a nested key.

vue
<VfGroup name="contact">
  <VfText name="first_name" label="First name" default="John" />
  <VfText name="last_name" label="Last name" default="Doe" />
  <VfText name="email" label="Email" default="john@example.com" />
</VfGroup>
vue
<template>
  <VfGroup name="contact">
    <VfText name="first_name" label="First name" default="John" />
    <VfText name="last_name" label="Last name" default="Doe" />
    <VfText name="email" label="Email" default="john@example.com" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  contact: {
    type: 'group',
    schema: {
      first_name: {
        type: 'text',
        label: 'First name',
        default: 'John',
      },
      last_name: {
        type: 'text',
        label: 'Last name',
        default: 'Doe',
      },
      email: {
        type: 'text',
        label: 'Email',
        default: 'john@example.com',
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Nested ​
The nested prop makes the group create its own key in the form data model. Without it, child values are merged flat into the parent.
vue
<VfGroup name="address" nested>
  <VfText name="city" label="City" default="New York" />
  <VfText name="zip" label="ZIP" default="10001" />
</VfGroup>
vue
<template>
  <VfGroup name="address" nested>
    <VfText name="city" label="City" default="New York" />
    <VfText name="zip" label="ZIP" default="10001" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  address: {
    type: 'group',
    nested: true,
    schema: {
      city: {
        type: 'text',
        label: 'City',
        default: 'New York',
      },
      zip: {
        type: 'text',
        label: 'ZIP',
        default: '10001',
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Stacked ​
The stacked prop renders children in a horizontal row, useful for placing an input alongside action buttons.
vue
<VfGroup name="newsletter" stacked>
  <VfText name="email" placeholder="Email address" />
  <VfButton name="subscribe" text="Subscribe" />
  <VfButton name="reset" text="Reset" severity="secondary" />
</VfGroup>
vue
<template>
  <VfGroup name="newsletter" stacked>
    <VfText name="email" placeholder="Email address" />
    <VfButton name="subscribe" text="Subscribe" />
    <VfButton name="reset" text="Reset" severity="secondary" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  newsletter: {
    type: 'group',
    stacked: true,
    schema: {
      email: {
        type: 'text',
        placeholder: 'Email address',
      },
      subscribe: {
        type: 'button',
        text: 'Subscribe',
      },
      reset: {
        type: 'button',
        text: 'Reset',
        severity: 'secondary',
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Heading ​
The heading prop renders the label as a heading element (<h1> through <h6>) instead of a <label>.
Account Details
vue
<VfGroup name="account" label="Account Details" :heading="3" />
vue
<template>
  <VfGroup name="account" label="Account Details" :heading="3">
    <VfText name="username" label="Username" />
    <VfText name="email" label="Email" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  account: {
    type: 'group',
    label: 'Account Details',
    heading: 3,
    schema: {
      username: { type: 'text', label: 'Username' },
      email: { type: 'text', label: 'Email' },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Wrap ​
The wrap prop renders a bordered card container around the group's children.
Billing Address
vue
<VfGroup name="billing" wrap />
vue
<template>
  <VfGroup
    name="billing"
    label="Billing Address"
    :heading="3"
    wrap
  >
    <VfText name="street" label="Street" />
    <VfText name="city" label="City" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  billing: {
    type: 'group',
    label: 'Billing Address',
    heading: 3,
    wrap: true,
    schema: {
      street: { type: 'text', label: 'Street' },
      city: { type: 'text', label: 'City' },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Inner Wrap ​
The innerWrap prop wraps each individual child element in its own bordered card, rather than wrapping the entire group in a single container.
Settings
vue
<VfGroup name="settings" inner-wrap>
vue
<template>
  <VfGroup
    name="settings"
    label="Settings"
    :heading="3"
    inner-wrap
  >
    <VfText name="username" label="Username" />
    <VfText name="email" label="Email" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  settings: {
    type: 'group',
    label: 'Settings',
    heading: 3,
    innerWrap: true,
    schema: {
      username: { type: 'text', label: 'Username' },
      email: { type: 'text', label: 'Email' },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Hoisted Errors ​
The hoist prop on child elements pushes their validation errors up to the nearest ancestor container. The group then displays the collected errors under its own label.
Contact
vue
<VfGroup name="contact">
  <VfText name="email" rules="required" hoist />
  <VfText name="phone" rules="required" hoist />
</VfGroup>
vue
<template>
  <VfGroup
    name="contact"
    label="Contact"
    :heading="3"
    inner-wrap
  >
    <VfText name="email" label="Email" rules="required" hoist />
    <VfText name="phone" label="Phone" rules="required" hoist />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  contact: {
    type: 'group',
    label: 'Contact',
    heading: 3,
    innerWrap: true,
    schema: {
      email: {
        type: 'text',
        label: 'Email',
        rules: 'required',
        hoist: true,
      },
      phone: {
        type: 'text',
        label: 'Phone',
        rules: 'required',
        hoist: true,
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Tabbed ​
The tabbed prop renders the group's children as tabs. Each child's page prop sets its tab label.
vue
<VfGroup name="profile" tabbed>
  <VfGroup name="personal" page="Personal">
    <VfText name="first_name" label="First name" />
    <VfText name="last_name" label="Last name" />
  </VfGroup>
  <VfGroup name="contact" page="Contact">
    <VfText name="email" label="Email" />
    <VfText name="phone" label="Phone" />
  </VfGroup>
</VfGroup>
vue
<template>
  <VfGroup name="profile" tabbed>
    <VfGroup name="personal" page="Personal">
      <VfText name="first_name" label="First name" />
      <VfText name="last_name" label="Last name" />
    </VfGroup>
    <VfGroup name="contact" page="Contact">
      <VfText name="email" label="Email" />
      <VfText name="phone" label="Phone" />
    </VfGroup>
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  profile: {
    type: 'group',
    tabbed: true,
    schema: {
      personal: {
        type: 'group',
        page: 'Personal',
        schema: {
          first_name: {
            type: 'text',
            label: 'First name',
          },
          last_name: {
            type: 'text',
            label: 'Last name',
          },
        },
      },
      contact: {
        type: 'group',
        page: 'Contact',
        schema: {
          email: {
            type: 'text',
            label: 'Email',
          },
          phone: {
            type: 'text',
            label: 'Phone',
          },
        },
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Disabled ​
The disabled prop propagates disabled state to all child elements. It also accepts Conditions.
Shipping
vue
<VfGroup name="shipping" disabled />
vue
<template>
  <VfGroup
    name="shipping"
    label="Shipping"
    :heading="3"
    disabled
  >
    <VfText name="street" label="Street" default="123 Main St" />
    <VfText name="city" label="City" default="New York" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  shipping: {
    type: 'group',
    label: 'Shipping',
    heading: 3,
    disabled: true,
    schema: {
      street: {
        type: 'text',
        label: 'Street',
        default: '123 Main St',
      },
      city: {
        type: 'text',
        label: 'City',
        default: 'New York',
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Released under the MIT License.
Copyright © 2022-present Adam Berecz