Version:

Install ​

shell
npm i @mate-react/form

Import ​

tsx
import { MateForm } from '@mate-react/form';
import { MateFormLayout } from '@mate-react/form-layout';
import { MateTextField } from '@mate-react/text-field';

Variants ​

Default ​

tsx
<MateForm>
  <MateFormLayout theme="spacing">
    <MateTextField label="First name" />
    <MateTextField label="Last name" />
  </MateFormLayout>
</MateForm>

Invalid ​

tsx
<MateForm invalid errorTitle="Error title">
  <ul slot="error-message">
    <li>This is the first form error</li>
    <li>This is the second form error</li>
  </ul>
  <MateFormLayout theme="spacing">
    <MateTextField label="First name" invalid errorMessage="Required" />
    <MateTextField label="Last name" />
  </MateFormLayout>
</MateForm>