Form

First, of note, the component-level styles include cross-browser fixes, and other general improvements to the rendering of form elements. As these should only be included in a project only if forms are in use, they are not included in the base level styles.

I like to use a div element with a class name of .input-group to wrap form inputs. It allows for consistent spacing between each label and input pair.

For inputs where numbers are being collected, instead of using <input type="number">, I’m using type="text" and then using inputmode="numeric" pattern="[0-9]*" to bring up the numeric keypad. type="number" can cause accessibility issues if not used cautiously. See the gov.uk blog post in the sources for more on this.

<form class="form">
    <div class="input-group">
        <label for="text">Text input label</label>
        <input type="text" id="text">
    </div>
    <div class="input-group">
        <label for="number">Number input label</label>
        <input type="text" id="number" inputmode="numeric" pattern="[0-9]*">
    </div>
    <div class="input-group">
        <label for="textarea">Textarea label</label>
        <textarea id="textarea"></textarea>
    </div>
</form>

.input-group {
    margin-bottom: 1.5rem;
}

.input-group:last-child {
    margin-bottom: 0;
}

Form

Sources