FormGrid

A responsive one-to-four-column grid for arranging form fields with consistent spacing.

Installation

tsx

import { FormGrid, Field, Input } from "madagent";

Two-column form

First name

Last name

Department

Role

Column options

1 columns

Field 1

2 columns

Field 1

Field 2

3 columns

Field 1

Field 2

Field 3

4 columns

Field 1

Field 2

Field 3

Field 4

Responsive collapse

First name

Last name

Department

Role

Prop	Type	Default	Description
`columns`	`1234`	`1`	Number of equal-width columns before the responsive collapse
`children*`	`ReactNode`	-	Fields or other form content placed in the grid

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

الاسم الأول

اسم العائلة

Usage

tsx

<FormGrid columns={2}>
  <Field label="الاسم الأول"><Input /></Field>
  <Field label="اسم العائلة"><Input /></Field>
</FormGrid>

FormGrid

A responsive one-to-four-column grid for arranging form fields with consistent spacing.

Installation

tsx

import { FormGrid, Field, Input } from "madagent";

Two-column form

First name

Last name

Department

Role

Column options

1 columns

Field 1

2 columns

Field 1

Field 2

3 columns

Field 1

Field 2

Field 3

4 columns

Field 1

Field 2

Field 3

Field 4

Responsive collapse

First name

Last name

Department

Role

Prop	Type	Default	Description
`columns`	`1234`	`1`	Number of equal-width columns before the responsive collapse
`children*`	`ReactNode`	-	Fields or other form content placed in the grid

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

الاسم الأول

اسم العائلة

Usage

tsx

<FormGrid columns={2}>
  <Field label="الاسم الأول"><Input /></Field>
  <Field label="اسم العائلة"><Input /></Field>
</FormGrid>