Form

Forms are the main wrapper components for form elements, with powerful customization and validation options.

The <IForm> component is a wrapper that provides proper handling of form validation and form grouping. Here are some things that are good to know:

All nested form components will inherit the form's disabled and readonly state
All nested form components will inherit the form's size variant
You can use the @submit binding to handle the submit event

Preview

Component.vue

<script lang="ts" setup>
import { ref } from 'vue';

const input = ref('');
const textarea = ref('');
const select = ref();
const options = ref([
    { id: 1, label: 'Option A' },
    { id: 2, label: 'Option B' },
    { id: 3, label: 'Option C' }
]);
const checkboxGroup = ref([]);
const radioGroup = ref('');
const toggle = ref(false);
const checkbox = ref(false);
const loading = ref(false);

function onSubmit() {
    loading.value = true;

    setTimeout(() => {
        loading.value = false;
    }, 2000);
}
</script>

<template>
    <IForm>
        <IFormGroup>
            <IFormLabel>Input</IFormLabel>
            <IInput v-model="input" placeholder="Type something.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Textarea</IFormLabel>
            <ITextarea v-model="textarea" placeholder="Write a comment.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Select</IFormLabel>
            <ISelect v-model="select" :options="options" placeholder="Choose an option" />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox Group</IFormLabel>
            <ICheckboxGroup v-model="checkboxGroup">
                <ICheckbox value="apple">Apple</ICheckbox>
                <ICheckbox value="banana">Banana</ICheckbox>

                <ICheckbox value="strawberry">Strawberry</ICheckbox>
                <ICheckbox value="mango">Mango</ICheckbox>
            </ICheckboxGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Radio Group</IFormLabel>
            <IRadioGroup v-model="radioGroup">
                <IRadio value="coconut">Coconut</IRadio>
                <IRadio value="passionfruit">Passion fruit</IRadio>
                <IRadio value="apricot">Apricot</IRadio>
            </IRadioGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Toggle</IFormLabel>
            <IToggle v-model="toggle">I confirm this toggle</IToggle>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox</IFormLabel>
            <ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
        </IFormGroup>

        <IFormGroup>
            <IButton type="button" :loading="loading" @click="onSubmit"> Submit </IButton>
        </IFormGroup>
    </IForm>
</template>

Disabled State

Setting a form as disabled will cause all of its child inputs to be disabled. When disabled, the form cannot be submitted.

Preview

Component.vue

<script lang="ts">
export default {
    data() {
        return {
            input: '',
            textarea: '',
            select: null,
            options: [
                { id: 1, label: 'Option A' },
                { id: 2, label: 'Option B' },
                { id: 3, label: 'Option C' }
            ],
            checkboxGroup: ['apple'],
            radioGroup: 'coconut',
            checkbox: true,
            toggle: true,
            loading: false
        };
    },
    methods: {
        onSubmit() {
            this.loading = true;

            setTimeout(() => {
                this.loading = false;
            }, 2000);
        }
    }
};
</script>

<template>
    <IForm disabled @submit="onSubmit">
        <IFormGroup>
            <IFormLabel>Input</IFormLabel>
            <IInput v-model="input" placeholder="Type something.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Textarea</IFormLabel>
            <ITextarea v-model="textarea" placeholder="Write a comment.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Select</IFormLabel>
            <ISelect v-model="select" :options="options" placeholder="Choose an option" />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox Group</IFormLabel>
            <ICheckboxGroup v-model="checkboxGroup">
                <ICheckbox value="apple">Apple</ICheckbox>
                <ICheckbox value="banana">Banana</ICheckbox>
                <ICheckbox value="strawberry">Strawberry</ICheckbox>
                <ICheckbox value="mango">Mango</ICheckbox>
            </ICheckboxGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Radio Group</IFormLabel>
            <IRadioGroup v-model="radioGroup">
                <IRadio value="coconut">Coconut</IRadio>
                <IRadio value="passionfruit">Passion fruit</IRadio>
                <IRadio value="apricot">Apricot</IRadio>
            </IRadioGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Toggle</IFormLabel>
            <IToggle v-model="toggle">I confirm this toggle</IToggle>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox</IFormLabel>
            <ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
        </IFormGroup>

        <IFormGroup>
            <IButton type="submit" :loading="loading"> Submit </IButton>
        </IFormGroup>
    </IForm>
</template>

Readonly State

Setting a form as readonly will cause all of its child inputs to be readonly. When readonly, the form can still be submitted.

Preview

Component.vue

<script lang="ts">
export default {
    data() {
        return {
            input: '',
            textarea: '',
            select: null,
            options: [
                { id: 1, label: 'Option A' },
                { id: 2, label: 'Option B' },
                { id: 3, label: 'Option C' }
            ],
            checkboxGroup: ['apple'],
            radioGroup: 'coconut',
            checkbox: true,
            toggle: true,
            loading: false
        };
    },
    methods: {
        onSubmit() {
            this.loading = true;

            setTimeout(() => {
                this.loading = false;
            }, 2000);
        }
    }
};
</script>

<template>
    <IForm readonly @submit="onSubmit">
        <IFormGroup>
            <IFormLabel>Input</IFormLabel>
            <IInput v-model="input" placeholder="Type something.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Textarea</IFormLabel>
            <ITextarea v-model="textarea" placeholder="Write a comment.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Select</IFormLabel>
            <ISelect v-model="select" :options="options" placeholder="Choose an option" />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox Group</IFormLabel>
            <ICheckboxGroup v-model="checkboxGroup">
                <ICheckbox value="apple">Apple</ICheckbox>
                <ICheckbox value="banana">Banana</ICheckbox>
                <ICheckbox value="strawberry">Strawberry</ICheckbox>
                <ICheckbox value="mango">Mango</ICheckbox>
            </ICheckboxGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Radio Group</IFormLabel>
            <IRadioGroup v-model="radioGroup">
                <IRadio value="coconut">Coconut</IRadio>
                <IRadio value="passionfruit">Passion fruit</IRadio>
                <IRadio value="apricot">Apricot</IRadio>
            </IRadioGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Toggle</IFormLabel>
            <IToggle v-model="toggle">I confirm this toggle</IToggle>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox</IFormLabel>
            <ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
        </IFormGroup>

        <IFormGroup>
            <IButton type="submit" :loading="loading"> Submit </IButton>
        </IFormGroup>
    </IForm>
</template>

Size Variants

You're able to use the size modifier to control the size of your <IForm>, using one of the available sizes: sm, md, and lg. The default size is set to md.

All of the form components inside the <IForm> will inherit the parent form group's size.

Preview

Component.vue

<script lang="ts">
export default {
    data() {
        return {
            input: '',
            textarea: '',
            select: null,
            options: [
                { id: 1, label: 'Option A' },
                { id: 2, label: 'Option B' },
                { id: 3, label: 'Option C' }
            ],
            checkboxGroup: ['apple'],
            radioGroup: 'coconut',
            checkbox: true,
            toggle: true,
            loading: false
        };
    },
    methods: {
        onSubmit() {
            this.loading = true;

            setTimeout(() => {
                this.loading = false;
            }, 2000);
        }
    }
};
</script>

<template>
    <IForm size="sm" @submit="onSubmit">
        <IFormGroup>
            <IFormLabel>Input</IFormLabel>
            <IInput v-model="input" placeholder="Type something.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Textarea</IFormLabel>
            <ITextarea v-model="textarea" placeholder="Write a comment.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Select</IFormLabel>
            <ISelect v-model="select" :options="options" placeholder="Choose an option" />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox Group</IFormLabel>
            <ICheckboxGroup v-model="checkboxGroup">
                <ICheckbox value="apple">Apple</ICheckbox>
                <ICheckbox value="banana">Banana</ICheckbox>
                <ICheckbox value="strawberry">Strawberry</ICheckbox>
                <ICheckbox value="mango">Mango</ICheckbox>
            </ICheckboxGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Radio Group</IFormLabel>
            <IRadioGroup v-model="radioGroup">
                <IRadio value="coconut">Coconut</IRadio>
                <IRadio value="passionfruit">Passion fruit</IRadio>
                <IRadio value="apricot">Apricot</IRadio>
            </IRadioGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Toggle</IFormLabel>
            <IToggle v-model="toggle">I confirm this toggle</IToggle>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox</IFormLabel>
            <ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
        </IFormGroup>

        <IFormGroup>
            <IButton type="submit" :loading="loading"> Submit </IButton>
        </IFormGroup>
    </IForm>
</template>

Preview

Component.vue

<script lang="ts">
export default {
    data() {
        return {
            input: '',
            textarea: '',
            select: null,
            options: [
                { id: 1, label: 'Option A' },
                { id: 2, label: 'Option B' },
                { id: 3, label: 'Option C' }
            ],
            checkboxGroup: ['apple'],
            radioGroup: 'coconut',
            checkbox: true,
            toggle: true,
            loading: false
        };
    },
    methods: {
        onSubmit() {
            this.loading = true;

            setTimeout(() => {
                this.loading = false;
            }, 2000);
        }
    }
};
</script>

<template>
    <IForm size="md" @submit="onSubmit">
        <IFormGroup>
            <IFormLabel>Input</IFormLabel>
            <IInput v-model="input" placeholder="Type something.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Textarea</IFormLabel>
            <ITextarea v-model="textarea" placeholder="Write a comment.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Select</IFormLabel>
            <ISelect v-model="select" :options="options" placeholder="Choose an option" />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox Group</IFormLabel>
            <ICheckboxGroup v-model="checkboxGroup">
                <ICheckbox value="apple">Apple</ICheckbox>
                <ICheckbox value="banana">Banana</ICheckbox>
                <ICheckbox value="strawberry">Strawberry</ICheckbox>
                <ICheckbox value="mango">Mango</ICheckbox>
            </ICheckboxGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Radio Group</IFormLabel>
            <IRadioGroup v-model="radioGroup">
                <IRadio value="coconut">Coconut</IRadio>
                <IRadio value="passionfruit">Passion fruit</IRadio>
                <IRadio value="apricot">Apricot</IRadio>
            </IRadioGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Toggle</IFormLabel>
            <IToggle v-model="toggle">I confirm this toggle</IToggle>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox</IFormLabel>
            <ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
        </IFormGroup>

        <IFormGroup>
            <IButton type="submit" :loading="loading"> Submit </IButton>
        </IFormGroup>
    </IForm>
</template>

Preview

Component.vue

<script lang="ts">
export default {
    data() {
        return {
            input: '',
            textarea: '',
            select: null,
            options: [
                { id: 1, label: 'Option A' },
                { id: 2, label: 'Option B' },
                { id: 3, label: 'Option C' }
            ],
            checkboxGroup: ['apple'],
            radioGroup: 'coconut',
            checkbox: true,
            toggle: true,
            loading: false
        };
    },
    methods: {
        onSubmit() {
            this.loading = true;

            setTimeout(() => {
                this.loading = false;
            }, 2000);
        }
    }
};
</script>

<template>
    <IForm size="lg" @submit="onSubmit">
        <IFormGroup>
            <IFormLabel>Input</IFormLabel>
            <IInput v-model="input" placeholder="Type something.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Textarea</IFormLabel>
            <ITextarea v-model="textarea" placeholder="Write a comment.." />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Select</IFormLabel>
            <ISelect v-model="select" :options="options" placeholder="Choose an option" />
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox Group</IFormLabel>
            <ICheckboxGroup v-model="checkboxGroup">
                <ICheckbox value="apple">Apple</ICheckbox>
                <ICheckbox value="banana">Banana</ICheckbox>
                <ICheckbox value="strawberry">Strawberry</ICheckbox>
                <ICheckbox value="mango">Mango</ICheckbox>
            </ICheckboxGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Radio Group</IFormLabel>
            <IRadioGroup v-model="radioGroup">
                <IRadio value="coconut">Coconut</IRadio>
                <IRadio value="passionfruit">Passion fruit</IRadio>
                <IRadio value="apricot">Apricot</IRadio>
            </IRadioGroup>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Toggle</IFormLabel>
            <IToggle v-model="toggle">I confirm this toggle</IToggle>
        </IFormGroup>

        <IFormGroup>
            <IFormLabel>Checkbox</IFormLabel>
            <ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
        </IFormGroup>

        <IFormGroup>
            <IButton type="submit" :loading="loading"> Submit </IButton>
        </IFormGroup>
    </IForm>
</template>

Form

Forms are the main wrapper components for form elements, with powerful customization and validation options.

Disabled State

Readonly State

Size Variants

Props

Slots

Events