Version:

Install ​

shell
npm i @mate-react/form-layout

Import ​

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

Variants ​

Default ​

tsx
<MateFormLayout>
  <MateTextField label="First name" />
  <MateTextField label="Last name" />
  <MateTextField label="Username" colspan={2} />
  <MatePasswordField label="Password" />
  <MatePasswordField label="Confirm password" />
</MateFormLayout>

With spacing ​

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