The <IFormGroup> component is a wrapper that provides proper grouping of labels, input, help text, and form validation messaging. By default, form groups add spacing between them.
<script>
export default {
data() {
return {
input: '',
textarea: ''
};
}
};
</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>
</IForm>
</template>
Setting a form group as disabled will cause all of its child form components to be disabled.
<script>
export default {
data() {
return {
input: '',
textarea: ''
};
}
};
</script>
<template>
<IForm>
<IFormGroup disabled>
<IFormLabel>Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
<IFormGroup disabled>
<IFormLabel>Textarea</IFormLabel>
<ITextarea v-model="textarea" placeholder="Write a comment.." />
</IFormGroup>
</IForm>
</template>
You're able to use the size modifier to control the size of the form components inside your <IFormGroup>, using one of the available sizes: sm, md, and lg. The default size is set to md.
All of the components inside the <IFormGroup> will inherit the parent form group's size.
<script>
export default {
data() {
return {
input: '',
textarea: ''
};
}
};
</script>
<template>
<IForm>
<IFormGroup size="sm">
<IFormLabel>Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
<IFormGroup size="sm">
<IFormLabel>Textarea</IFormLabel>
<ITextarea v-model="textarea" placeholder="Write a comment.." />
</IFormGroup>
</IForm>
</template>
<script>
export default {
data() {
return {
input: '',
textarea: ''
};
}
};
</script>
<template>
<IForm>
<IFormGroup size="md">
<IFormLabel>Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
<IFormGroup size="md">
<IFormLabel>Textarea</IFormLabel>
<ITextarea v-model="textarea" placeholder="Write a comment.." />
</IFormGroup>
</IForm>
</template>
<script>
export default {
data() {
return {
input: '',
textarea: ''
};
}
};
</script>
<template>
<IForm>
<IFormGroup size="lg">
<IFormLabel>Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
<IFormGroup size="lg">
<IFormLabel>Textarea</IFormLabel>
<ITextarea v-model="textarea" placeholder="Write a comment.." />
</IFormGroup>
</IForm>
</template>
You can nest form groups in order to control the disabled, readonly and size properties of multiple form components at once. All the child inputs of the parent form group will inherit the property.
<script>
export default {
data() {
return {
input: '',
textarea: '',
checkbox: false
};
}
};
</script>
<template>
<IForm>
<IFormGroup>
<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>
<IFormGroup>
<ICheckbox v-model="checkbox">I accept the terms and conditions</ICheckbox>
</IFormGroup>
</IForm>
</template>
<script>
export default {
data() {
return {
input: '',
textarea: '',
checkbox: false
};
}
};
</script>
<template>
<IForm>
<IFormGroup disabled>
<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>
</IForm>
</template>
<script>
export default {
data() {
return {
input: '',
textarea: '',
checkbox: false
};
}
};
</script>
<template>
<IForm>
<IFormGroup readonly>
<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>
</IForm>
</template>
<script>
export default {
data() {
return {
input: '',
textarea: '',
checkbox: false
};
}
};
</script>
<template>
<IForm>
<IFormGroup size="lg">
<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>
</IForm>
</template>