Version:

Install ​

shell
npm i @mate-vue/form

Import ​

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

Variants ​

Default ​

vue
<template>
  <MateForm>
    <MateFormLayout>
      <h5>User</h5>
      <MateTextField label="First name"></MateTextField>
      <MateTextField label="Last name"></MateTextField>
      <MateTextField label="Username"></MateTextField>
    </MateFormLayout>
    <MateFormLayout>
      <h5>Contact</h5>
      <MateEmailField label="E-Mail"></MateEmailField>
      <MateTextField label="Phone"></MateTextField>
    </MateFormLayout>
    <MateFormLayout>
      <h5>Password</h5>
      <MatePasswordField label="Password"></MatePasswordField>
      <MatePasswordField label="Confirm password"></MatePasswordField>
    </MateFormLayout>
  </MateForm>
</template>

Error ​

vue
<template>
  <MateForm invalid error-title="Error title" :error-items="['This is the first form error', 'This is the second form error']">
    <MateFormLayout>
      <MateTextField label="Field" invalid errorMessage="Required"></MateTextField>
    </MateFormLayout>
  </MateForm>
</template>