Layouts

Layouts allow you to group form elements into a defined area in your form. This can be for organization/display purposes, or for representing model relationships cleanly.

Iridium has 4 built-in form layouts

• Grid
• Card
• Tabs
• Repeater

Additionally, layouts can be nested within each-other for multiple layers of grouping.

---

Common methods

All layouts share the same common methods.

Schema

The schema method allows you to pass in components (which are fields or layouts) to be rendered inside your chosen layout. You can nest components infinitely if you'd like.

FormInput("age"), // input on root form
FormGrid("my-grid"). // grid layout
    Schema(
        FormInput("name"), // name input inside "my-grid"
        FormCard("my-inner-card"). // a form card layout inside "my-grid"
            Schema(
                // a form input inside "my-inner-card" inside "my-grid"
                FormInput("last-name") 
            ),
        FormSwitch("developer"), // a switch inside "my-grid"
    ),

SchemaColumnsFixed

You can set a fixed number of columns for your layout's internal grid as so:

// static
FormGrid("grid").
    SchemaColumnsFixed(3)

// callback
FormGrid("grid").
    SchemaColumnsFixedFn(
        func (ctx FieldContext) int {
            return 3
        })

SchemaColumns

You can allow your layout's columns to dynamically change with the view port as so:

// static
FormGrid("grid").
    SchemaColumns(map[string]int{
        "xs": 1,
        "sm": 2,
        "lg": 4,
    })
    
// callback
FormGrid("grid").
    SchemaColumnsFn(
        func (ctx FieldContext) map[string]int {
            return map[string]int{
                "xs": 1,
                "lg: 6,
            }
        })

These breakpoints are based off tailwind's grid column span breakpoints.

Fixed Columns

You can set a fixed number of columns that your layout will take up within whatever schema it resides as so:

// static
FormGrid("grid").
    ColumnsFixed(2)

// callback
FormGrid("grid").
    ColumnsFixedFn(
        func (ctx FieldContext) int {
            return 2
        })

ColumnSpan

You can allow your layout to dynamically change the number of columns it takes up within what schema it resides as so:

// static
FormGrid("grid").
    ColumnSpan(map[string]int{
        "xs": 1,
        "md": 3,
    })

// callback
FormGrid("grid").
    ColumnSpanFn(
        func (ctx FieldContext) map[string]int {
            return map[string]int{
                "md": 3,
                "xl" 6,
            }
        })

These breakpoints are based off tailwind's grid column span breakpoints.

ColumnSpanFull

You can set your layout to take up an entire row of it's surronding schema as so:

// static
FormGrid("grid").
    ColumnSpanFull()

// callback
FormGrid("grid").
    ColumnSpanFullFn(
        func (ctx FieldContext) bool {
            return true
        })

Attributes

You can apply any number of arbitrary attributes to your layout's main container as so:

// static
FormGrid("grid").
    Attributes(map[string]any{
        "@click": "console.log('Hello Iridium!')",
    })

// callback
FormGrid("grid").
    AttributesFn(
        func (ctx FieldContext) map[string]any {
            return map[string]any{
                "@click": "console.log('Hello Iridium!'),
            }
        })

Learn more about attributes.