Version:

Install ​

shell
npm i @mate/form

Import ​

javascript
import '@mate/form';

Variants ​

Default ​

html
<mate-form>
    <mate-form-layout>
      <h5>User</h5>
      <vaadin-text-field label="First name"></vaadin-text-field>
      <vaadin-text-field label="Last name"></vaadin-text-field>
      <vaadin-text-field label="Username"></vaadin-text-field>
    </mate-form-layout>
    <mate-form-layout>
      <h5>Contact</h5>
      <vaadin-email-field label="E-Mail"></vaadin-email-field>
      <vaadin-text-field label="Phone"></vaadin-text-field>
    </mate-form-layout>
    <mate-form-layout>
      <h5>Password</h5>
      <vaadin-password-field label="Password"></vaadin-password-field>
      <vaadin-password-field label="Confirm password"></vaadin-password-field>
    </mate-form-layout>
</mate-form>

Error ​

html
<mate-form invalid error-title="Error title">
    <mate-form-layout>
      <MateTextField label="Field" invalid errorMessage="Required"></MateTextField>
    </mate-form-layout>
</mate-form>
javascript
document.querySelector('mate-form').erroritems = ['This is the first form error', 'This is the second form error'];