Skip to content
My Docs

Layout Auto Mode Example

Layout Auto Mode Example

Section titled “Layout Auto Mode Example”

The Simple mode (auto) is the recommended layout mode for most forms. It automatically adapts to any container width using CSS Grid’s auto-fit feature, making it perfect for forms that live in sidebars, modals, or full-width pages.

Key Features

Section titled “Key Features”
  • Automatic adaptation: Form adjusts to container width (30%, 50%, 100%, etc.)
  • Semantic field widths: Use "full", "half", "third" instead of column numbers
  • Density control: Choose "relaxed", "normal", or "compact" spacing
  • No breakpoint management: The system handles responsive behavior automatically

Example Configuration

Section titled “Example Configuration”
import { FormFactory } from "@enlolab/forms";
import { z } from "zod";


const AutoLayoutForm = FormFactory({
  formId: "auto-layout-example",
  layout: {
    mode: "auto",
    auto: {
      density: "normal", // "relaxed" | "normal" | "compact"
      minFieldWidth: 240, // Minimum field width in pixels
      maxColumns: 3, // Maximum number of columns
    },
    className: "max-w-4xl mx-auto",
  },
  fields: {
    firstName: {
      type: "text",
      label: "First Name",
      layout: {
        width: {
          mobile: "full",
          desktop: "half", // Takes half width on desktop
        },
      },
      schema: z.string().min(1),
    },
    lastName: {
      type: "text",
      label: "Last Name",
      layout: {
        width: {
          mobile: "full",
          desktop: "half", // Takes half width on desktop
        },
      },
      schema: z.string().min(1),
    },
    email: {
      type: "email",
      label: "Email",
      layout: {
        width: {
          mobile: "full",
          desktop: "full", // Always full width
        },
      },
      schema: z.string().email(),
    },
    bio: {
      type: "textarea",
      label: "Biography",
      layout: {
        width: {
          mobile: "full",
          desktop: "full", // Textareas should be full width
        },
      },
      schema: z.string().min(10),
    },
  },
});

Density Examples

Section titled “Density Examples”

Relaxed Density

Section titled “Relaxed Density”

More space between fields - good for forms with few fields:

layout: {
  mode: "auto",
  auto: {
    density: "relaxed",  // gap-6
    minFieldWidth: 260,
  },
}

Normal Density

Section titled “Normal Density”

Standard spacing - good for most forms:

layout: {
  mode: "auto",
  auto: {
    density: "normal",  // gap-4 (default)
    minFieldWidth: 240,
  },
}

Compact Density

Section titled “Compact Density”

Tighter spacing - good for dense forms:

layout: {
  mode: "auto",
  auto: {
    density: "compact",  // gap-2
    minFieldWidth: 200,
  },
}

Container Width Adaptation

Section titled “Container Width Adaptation”

The auto mode automatically adapts to different container widths:

  • 30% width container: Typically shows 1 column
  • 50% width container: Shows 1-2 columns
  • 100% width container: Shows 2-3 columns (based on maxColumns)

The system uses minFieldWidth to determine how many columns fit, so it works perfectly in any context.

Field Width Semantics

Section titled “Field Width Semantics”

Instead of thinking about column numbers, use semantic widths:

  • "auto": Let the system decide (default)
  • "full": Field takes full width (good for textareas, date ranges)
  • "half": Field takes half width (good for pairs like first/last name)
  • "third": Field takes one third width (good for groups of three)

Best Practices

Section titled “Best Practices”
  1. Start with auto mode: It handles 90% of cases perfectly
  2. Use full width for long fields: Textareas, date ranges, sliders should be "full"
  3. Use half for pairs: First/last name, city/state work well as "half"
  4. Set minFieldWidth appropriately: 240-260px is good for most cases
  5. Limit maxColumns: 3-4 columns is usually enough, prevents fields from being too narrow

When to Use Auto Mode

Section titled “When to Use Auto Mode”

✅ Use auto mode when:

  • You want the form to adapt to any container width
  • You don’t need precise control over columns
  • You’re building a standard form (contact, registration, etc.)
  • You want the simplest possible configuration

❌ Don’t use auto mode when:

  • You need exact control over columns per breakpoint
  • You’re building a complex dashboard with specific layout requirements
  • You need custom breakpoint mappings

Next Steps

Section titled “Next Steps”