@inkline/inkline/src/stories/forms/validation/advanced.html

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

<i-form v-model="schema" @submit="onSubmit">
    <i-form-group name="group1">
        <i-form-label for="input1">Input 1</i-form-label>
        <i-input id="input1" name="input1" placeholder="Type something.." />
    </i-form-group>

    <i-form-group name="group2">
        <i-form-label>Input 2</i-form-label>
        <i-input name="input1" placeholder="Type something.." />

        <i-form-group name="group1">
            <i-form-label>Input 3</i-form-label>
            <i-input name="input1" placeholder="Type something.." />
        </i-form-group>
    </i-form-group>

    <i-form-group name="group3">
        <i-form-group v-for="(input, index) in schema.group3" :key="index">
            <i-form-label>Input {{index}}</i-form-label>
            <i-input :name="index" placeholder="Type something.." />
        </i-form-group>

        <i-button @click="addRow" type="button">Add Row</i-button>
    </i-form-group>

    <i-form name="form4">
        <i-form-group name="group1">
            <i-form-label>Input</i-form-label>
            <i-input name="input1" placeholder="Type something.." />
        </i-form-group>
    </i-form>

    <i-form-group>
        <i-form-label>Input 1</i-form-label>
        <i-input name="group5.input1" placeholder="Type something.." />

        <div v-if="schema.group5.example">
            <i-form-label>Input 2</i-form-label>
            <i-input name="group5.example" placeholder="Type something.." />
        </div>

        <i-form-group name="group5.group1">
            <i-form-label>Input 3</i-form-label>
            <i-input name="input1" placeholder="Type something.." />
        </i-form-group>
    </i-form-group>

    <i-form-group>
        <i-button type="submit">Submit</i-button>
        <i-button type="button" class="_margin-left" @click="setRow">Set Row</i-button>
    </i-form-group>
</i-form>