Version:

Install ​

shell
npm i @mate-vue/form-layout

Import ​

vue
<script setup>
import { MateFormLayout } from '@mate-vue/form-layout';
</script>

Variants ​

Default ​

vue
<template>
  <MateFormLayout>
    <h5>User</h5>
    <MateTextField label="First name"></MateTextField>
    <MateTextField label="Last name"></MateTextField>
    <MateTextField label="Username"></MateTextField>
  </MateFormLayout>
</template>

Multiple Sections ​

vue
<template>
  <MateFormLayout>
    <h5>User</h5>
    <MateTextField label="First name"></MateTextField>
    <MateTextField label="Last name"></MateTextField>
  </MateFormLayout>
  <MateFormLayout>
    <h5>Contact</h5>
    <MateTextField label="Phone"></MateTextField>
    <MateEmailField label="E-Mail"></MateEmailField>
  </MateFormLayout>
</template>