Form Grid

Shipping address

One column on small screens and compact multi-column composition above it.

First name

Last name

Postal code

Street address

City

Delivery notes

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/form-grid.json

Usage

import { FormGrid, FormGridItem } from "@/components/matos-ui/form-grid"

<FormGrid columns="three">
  <InputField label="City" />
  <InputField label="State" />
  <InputField label="Postal code" />
  <FormGridItem span="full">
    <TextareaField label="Notes" />
  </FormGridItem>
</FormGrid>

The grid begins as one column and expands with md and lg breakpoints. Available columns are one, two, and three.