Components / Forms

Form Layouts

Composition patterns for real forms: two-column grids, mixed column rows, and forms inside dialogs (including a wider dialog that pairs the form with an info & meta column). Built from Field, the form controls, and Dialog.

Two-column layout

A responsive two-column grid. Fields stack on mobile and split into two columns from sm up. Full-width fields use sm:col-span-2.

Contact details · 2 columns

tsx

{/* Two equal columns; full-width fields span both */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
  <Field>
    <FieldLabel required>First name</FieldLabel>
    <Input required />
  </Field>
  <Field>
    <FieldLabel required>Last name</FieldLabel>
    <Input required />
  </Field>
  <Field className="sm:col-span-2">
    <FieldLabel required>Email</FieldLabel>
    <Input type="email" required />
  </Field>
</div>

Combination columns

A six-column track lets rows mix widths: a full-width field, a wide + narrow pair, and an address row split three ways.

Property details · mixed columns

tsx

{/* Combination: full-width, then 3-up, then 2-up rows */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
  <Field className="sm:col-span-6">
    <FieldLabel required hint="The legal entity name on your strata roll.">
      Owners corporation
    </FieldLabel>
    <Input required />
  </Field>
  <Field className="sm:col-span-3">
    <FieldLabel>Street address</FieldLabel>
    <Input />
  </Field>
  <Field className="sm:col-span-2">
    <FieldLabel>Suburb</FieldLabel>
    <Input />
  </Field>
  <Field className="sm:col-span-1">
    <FieldLabel>State</FieldLabel>
    {/* Select … */}
  </Field>
</div>

Form in a dialog

A compact single-column form inside a standard dialog, with the actions in the footer.

Dialog · invite owner

Wide dialog · form + info column

A wider dialog (sm:max-w-3xl) split into two columns: the form on the left and a supporting info & meta panel on the right.

Dialog · register a building

tsx

{/* Wider dialog: form column + info/meta column */}
<DialogContent className="sm:max-w-3xl">
  <div className="grid grid-cols-1 gap-6 md:grid-cols-[1fr_17rem]">
    <div className="flex flex-col gap-4">
      {/* …form fields… */}
    </div>
    <aside className="rounded-sm bg-muted/40 p-4 ring-1 ring-border">
      {/* …info & meta… */}
    </aside>
  </div>
</DialogContent>