Form layouts

Single-field layout

In a simple layout, a field always covers a full row from the left to the right edge. All fields are wrapped in a <div class="form-row"> element. A validation error message can be displayed below each field.

<div class="form-row">
    <div class="label">Field label</div>
    <input type="text">
    <div></div>
</div>

Validation errors are added with the input-validation-error class on the input element and the field-validation-error class on the following label that contains the error message. These classes are automatically set by ASP.NET Core tag helpers.

<div class="form-row">
    <div class="label">Field label</div>
    <input type="text" class="input-validation-error">
    <div class="field-validation-error">Error message</div>
</div>

This also works for checkbox fields. For now, the first (label class) element can be left out.

<div class="form-row">
    <label><input type="checkbox"> Keep me updated</label>
    <div></div>
</div>

Multi-field layout

Multiple fields can be placed in a single row. If nothing else is specified, all fields share the row width equally. Error message elements need to be present but may be empty. The grid layout ensures that all parts are placed at the same vertical offset.

<div class="form-row">
    <div class="label">First field label</div>
    <input type="text">
    <div></div>
    
    <div class="label">Second field label</div>
    <input type="number" class="input-validation-error">
    <div class="field-validation-error">Error message</div>
</div>

Now the class require-minitab indicates that all fields are placed below each other if the view width drops under the width of a mini tablet. The following classes are available: require-minitab, require-tablet, require-desktop, require-wide

When no validation messages are used, the document structure can be simplified by leaving them out. The class no-validation must be used for the row in this case.

To set different widths for each field, the CSS property grid-template-columns must be set for the row. This property of the CSS grid layout accepts a list of width values for each column. Common values are 1fr (and other numeric values with the fr unit) for proportional widths, max-content for the content’s desired width, and fixed lenghts in pixels or other units. See the CSS specification for details.

Custom layout

Custom (responsive) layouts can be achieved by defining a CSS class for a row that defines the column widths separately. In a CSS stylesheet, different values can be assigned to the class using media queries. In this example, no labels or validation messages can be used because the option fields may be arranged in one or more rows and columns.

Buttons

Most forms have a set of buttons at their end to let the user perform actions. These buttons should be placed in a <div class="buttons"> element for proper spacing.

<div class="buttons">
    <button class="default"><i class="fa fa-check"></i> OK</button>
    <button>Cancel</button>
    ...
</div>

Buttons can be placed in a group without a gap between them:

<div class="buttons group">
    <button><i class="fa fa-check"></i> OK</button>
    <button>Cancel</button>
    ...
</div>

Note that only <button> or <a> buttons can be grouped together, they cannot be mixed. You also should not disable individual buttons of a group or the separator bars will be inconsistent.

Only some of the buttons are grouped together:

<div class="buttons">
    <button><i class="fa fa-check"></i> OK</button>
    <span class="group">
        <button>A</button>
        <button>B</button>
    </span>
</div>