Looseleaf Framework

Form 

<form>

    <div class="field">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" />
    </div>

    <div class="field">
        <label for="message">Message</label>
        <textarea id="message" name="message">
    </textarea>
    </div>

    <fieldset>
        <legend>Keep me informed</legend>
        <div class="field">
            <input type="radio" id="contact-email" name="contact" value="email" />
            <label for="contact-email">By email</label>
        </div>
        <div class="field">
            <input type="radio" id="contact-phone" name="contact" value="phone" />
            <label for="contact-phone">By phone</label>
        </div>
        <div class="field">
            <input type="radio" id="contact-neither" name="contact" value="neither" />
            <label for="contact-neither">Don&#39;t contact me</label>
        </div>
    </fieldset>

    <fieldset>
        <legend>How did you hear about this project?</legend>

        <div class="field">
            <input type="checkbox" id="source-friend" name="source" value="friend" />
            <label for="source-friend">A friend</label>
        </div>

        <div class="field">
            <input type="checkbox" id="source-website" name="source" value="website" />
            <label for="source-website">A website</label>
        </div>

        <div class="field">
            <input type="checkbox" id="source-social" name="source" value="social" />
            <label for="source-social">Social media</label>
        </div>
    </fieldset>
    <button type="submit">Send message</button>
</form>
 
<form>
    {%- render "@input" -%}
    {%- render "@text-area" -%}
    {%- render "@radio-buttons", { name: "contact", legend: "Keep me informed", options: { email: "By email", phone: "By phone", neither: "Don't contact me" } } -%}
    {%- render "@checkboxes", { name: "source", legend: "How did you hear about this project?", options: { friend: "A friend", website: "A website", social: "Social media" } } -%}
    {%- render "@button", {"type": "submit", "text": "Send message"} -%}
</form>
 
/* No context defined. */

Form

Forms apply vertical spacing between subsequent elements:

form > * + * {
    margin-block-start: 2em;
}

To maintain proximity between form elements, it’s important that form labels and the corresponding elements be wrapped in a containing element of some sort, ideally a paragraph.