formGroup

This component is meant to act a a grouping component for formControls.

It controls the overall layout, that is whether the labels are rendered on top of their controls or on the left hand side. In the latter case also the space of the label area can be controlled, so that the whole form offers a consistent visual appearance.

This component supports responsiveness out of the box. The above features can be all configured in a different manner for each breakpoint (sm, md, lg and xl) to offer the best UX for a device.

Example call:

formGroup {
    items {
        formControl {
            label("Password")
            helperText("Tip: Choose a long password")
            inputField { type("password") }
        }
        formControl {
            // ...
        }
        // some more formControls
    }
}

In order to place the labels on the left side of the control, use the `labels` context:

formGroup {
    labels {
        placement { left } // ``top`` is default (see above example)
        width("200px") // ``auto`` is default, could also be ``vw``, ``%`` or ``rem`` and alike
    }
    items {
        formControl {
            // ...
        }
        // some more formControls
    }
}

To adapt the form layout to the device size, use the overloaded variant of the `labels` context:

• on small devices place the labels on top of the control

• from medium devices upwards place the labels on the left side of the controls

formGroup {
    labels(
        sm = {
            placement { top }
        },
        md = {
            placement { left }
            width("200px")
        }
    )
    items {
        formControl {
            // ...
        }
        // some more formControls
    }
}

See also

Parameters