@inkline/inkline/src/stories/forms/validation/methods/groups-object.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<i-form v-model="schema">
    <i-form-group name="group">
        <i-form-group>
            <i-form-label>First name</i-form-label>
            <i-input name="firstName" placeholder="Type something.." />
            <i-form-error for="firstName" />
        </i-form-group>
        <i-form-group>
            <i-form-label>Last name</i-form-label>
            <i-input name="lastName" placeholder="Type something.." />
            <i-form-error for="lastName" />
        </i-form-group>
        <i-form-group v-if="schema.group.email">
            <i-form-label>Email</i-form-label>
            <i-input name="email" placeholder="Type something.." />
            <i-form-error for="email" />
        </i-form-group>
        <i-form-group v-if="schema.group.address">
            <i-form-label>Address</i-form-label>
            <i-input name="address" placeholder="Type something.." />
            <i-form-error for="address" />
        </i-form-group>
    </i-form-group>
    <i-form-group>
        <i-button @click="setEmail" type="button">Set Email</i-button>&nbsp;
        <i-button @click="setAddress" type="button">Set Address</i-button>&nbsp;
    </i-form-group>
</i-form>