# 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>