Form: With Errors

<form class="form">

    <div class="form__field  form__field--text  form__field--error">

        <label for="text-input">Text input</label>

        <input id="text-input" name="text-input" type="text">

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <div class="form__field  form__field--email  form__field--error">

        <label for="email-input">Email input</label>

        <input id="email-input" name="email-input" type="email">

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <div class="form__field  form__field--number  form__field--error">

        <label for="number-input">Number input</label>

        <input id="number-input" name="number-input" pattern="\d" type="number">

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <div class="form__field  form__field--password  form__field--error">

        <label for="password-input">Password input</label>

        <input id="password-input" name="password-input" type="password">

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <div class="form__field  form__field--select  form__field--error">

        <label for="select-menu">Select menu</label>

        <select id="select-menu" name="select-menu">

            <option value="apple">Apple</option>

            <option selected value="banana">Banana</option>

            <option disabled value="orange">Orange</option>

        </select>

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <div class="form__field  form__field--tel  form__field--error">

        <label for="telephone-input">Telephone input</label>

        <input id="telephone-input" name="telephone-input" type="tel">

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <div class="form__field  form__field--textarea  form__field--error">

        <label for="text-area">Text area</label>

        <textarea id="text-area" name="text-area" rows="0"></textarea>

        <p class="form__error">Meaningful error message goes here.</p>

    </div>

    <fieldset class="form__group  form__group--error">

        <legend class="form__label  form__label--group"></legend>

        <div class="form__field  form__field--checkbox">

            <input id="first-checkbox" name="checkboxes" type="checkbox">

            <label for="first-checkbox">First item</label>

        </div>

        <div class="form__field  form__field--checkbox">

            <input checked id="second-checkbox" name="checkboxes" type="checkbox">

            <label for="second-checkbox">Second item</label>

        </div>

        <div class="form__field  form__field--checkbox">

            <input checked id="third-checkbox" name="checkboxes" type="checkbox">

            <label for="third-checkbox">Third item</label>

        </div>

        <p class="form__error">Meaningful error message goes here.</p>

    </fieldset>

    <fieldset class="form__group  form__group--error">

        <legend class="form__label  form__label--group"></legend>

        <div class="form__field  form__field--radio">

            <input id="first-radio" name="checkboxes" type="radio">

            <label for="first-radio">First item</label>

        </div>

        <div class="form__field  form__field--radio">

            <input checked id="second-radio" name="checkboxes" type="radio">

            <label for="second-radio">Second item</label>

        </div>

        <div class="form__field  form__field--radio">

            <input id="third-radio" name="checkboxes" type="radio">

            <label for="third-radio">Third item</label>

        </div>

        <p class="form__error">Meaningful error message goes here.</p>

    </fieldset>

    <button class="button" type="submit">Submit</button>

</form>