Project Lima pattern lib

Form - States: Error 

<form action="#" method="post" class="b-form">
    <div class="b-form__group has-error">
        <label class="b-form__label" for="name">Input type="text"</label>
        <input class="b-form__input" type="text" id="name" placeholder="Default text" />
        <span class="b-form__message">This is an example message</span>
    </div>

    <div class="b-form__group has-error">
        <label class="b-form__label" for="message">Textarea</label>
        <textarea class="b-form__textarea" id="message" placeholder="Default text"></textarea>
        <span class="b-form__message">This is an example message</span>
    </div>

    <fieldset class="b-form__group has-error">
        <legend class="b-form__legend">Radio Buttons <span class="b-form__message">This is an example message</span></legend>

        <div class="b-form__option">
            <input id="radio-group-1" class="b-form__option-input" type="radio" name="radio-group" value="radio-group-1">
            <label class="b-form__option-label" for="radio-group-1">
                <span class="b-form__option-faux b-form__option-faux--radio"></span>
                One
                <span class="b-form__message">This is an example message</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="radio-group-2" class="b-form__option-input" type="radio" name="radio-group" value="radio-group-2">
            <label class="b-form__option-label" for="radio-group-2">
                <span class="b-form__option-faux b-form__option-faux--radio"></span>
                Two
                <span class="b-form__message">This is an example message</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="radio-group-3" class="b-form__option-input" type="radio" name="radio-group" value="radio-group-3">
            <label class="b-form__option-label" for="radio-group-3">
                <span class="b-form__option-faux b-form__option-faux--radio"></span>
                Three four five lorem ispum dolor sit
                <span class="b-form__message">This is an example message</span>
            </label>
        </div>
    </fieldset>

    <fieldset class="b-form__group has-error">
        <legend class="b-form__legend">Checkboxes <span class="b-form__message">This is an example message</span></legend>

        <div class="b-form__option">
            <input id="checkbox-group-1" class="b-form__option-input" type="checkbox" name="checkbox-group" value="checkbox-group-1">
            <label class="b-form__option-label" for="checkbox-group-1">
                <span class="b-form__option-faux b-form__option-faux--checkbox"></span>
                One
                <span class="b-form__message">This is an example message</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="checkbox-group-2" class="b-form__option-input" type="checkbox" name="checkbox-group" value="checkbox-group-2">
            <label class="b-form__option-label" for="checkbox-group-2">
                <span class="b-form__option-faux b-form__option-faux--checkbox"></span>
                Two
                <span class="b-form__message">This is an example message</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="checkbox-group-3" class="b-form__option-input" type="checkbox" name="checkbox-group" value="checkbox-group-3">
            <label class="b-form__option-label" for="checkbox-group-3">
                <span class="b-form__option-faux b-form__option-faux--checkbox"></span>
                Three four five lorem ispum dolor sit
                <span class="b-form__message">This is an example message</span>
            </label>
        </div>
    </fieldset>

    <div class="b-form__group has-error">
        <label class="b-form__label" for="test-range">Input type="range"</label>
        <div class="b-form__range-container">
            <input class="b-form__range-input" type="range" id="testRange" name="testRange" min="0" max="20000" value="0" autocomplete="off">
            <output class="b-form__range-output" id="testRangeOutput" name="testRangeOutput">0</output>
        </div>
        <span class="b-form__message">This is an example message</span>
    </div>

    <div class="b-form__group has-error">
        <label class="b-form__label" for="select-dd">Select drop down:</label>
        <div class="b-form__select">
            <div class="b-form__select-arrow"></div>
            <div class="b-form__select-display">Please choose an option, this is truncated to look amazing</div>
            <select class="b-form__select-select" id="select-dd" name="select-dd">
                <option value="" disabled selected>Please choose an option, this is truncated to look amazing</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <span class="b-form__message">This is an example message</span>
    </div>

    <div class="b-form__group has-error">
        <label class="b-form__label" for="card_img2">Card Image 2</label>
        <div class="b-form__file-upload-container">
            <span class="b-form__file-upload">Upload a file</span>
            <input class="b-hide" type="file" id="card_img2" name="card_img2" autocomplete="off" data-multiple-caption="{count} files selected" multiple>
        </div>
        <span class="b-form__message">This is an example message</span>
    </div>
</form>
 
<form action="#" method="post" class="b-form">
    <div class="b-form__group{{ modifier }}">
        <label class="b-form__label" for="name">Input type="text"</label>
        <input class="b-form__input" type="text" id="name" placeholder="Default text" />
        <span class="b-form__message">{{ message }}</span>
    </div>

    <div class="b-form__group{{ modifier }}">
        <label class="b-form__label" for="message">Textarea</label>
        <textarea class="b-form__textarea" id="message" placeholder="Default text"></textarea>
        <span class="b-form__message">{{ message }}</span>
    </div>

    <fieldset class="b-form__group{{ modifier }}">
        <legend class="b-form__legend">Radio Buttons <span class="b-form__message">{{ message }}</span></legend>

        <div class="b-form__option">
            <input id="radio-group-1" class="b-form__option-input" type="radio" name="radio-group" value="radio-group-1">
            <label class="b-form__option-label" for="radio-group-1">
                <span class="b-form__option-faux b-form__option-faux--radio"></span>
                One
                <span class="b-form__message">{{ message }}</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="radio-group-2" class="b-form__option-input" type="radio" name="radio-group" value="radio-group-2">
            <label class="b-form__option-label" for="radio-group-2">
                <span class="b-form__option-faux b-form__option-faux--radio"></span>
                Two
                <span class="b-form__message">{{ message }}</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="radio-group-3" class="b-form__option-input" type="radio" name="radio-group" value="radio-group-3">
            <label class="b-form__option-label" for="radio-group-3">
                <span class="b-form__option-faux b-form__option-faux--radio"></span>
                Three four five lorem ispum dolor sit
                <span class="b-form__message">{{ message }}</span>
            </label>
        </div>
    </fieldset>


    <fieldset class="b-form__group{{ modifier }}">
        <legend class="b-form__legend">Checkboxes <span class="b-form__message">{{ message }}</span></legend>

        <div class="b-form__option">
            <input id="checkbox-group-1" class="b-form__option-input" type="checkbox" name="checkbox-group" value="checkbox-group-1">
            <label class="b-form__option-label" for="checkbox-group-1">
                <span class="b-form__option-faux b-form__option-faux--checkbox"></span>
                One
                <span class="b-form__message">{{ message }}</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="checkbox-group-2" class="b-form__option-input" type="checkbox" name="checkbox-group" value="checkbox-group-2">
            <label class="b-form__option-label" for="checkbox-group-2">
                <span class="b-form__option-faux b-form__option-faux--checkbox"></span>
                Two
                <span class="b-form__message">{{ message }}</span>
            </label>
        </div>

        <div class="b-form__option">
            <input id="checkbox-group-3" class="b-form__option-input" type="checkbox" name="checkbox-group" value="checkbox-group-3">
            <label class="b-form__option-label" for="checkbox-group-3">
                <span class="b-form__option-faux b-form__option-faux--checkbox"></span>
                Three four five lorem ispum dolor sit
                <span class="b-form__message">{{ message }}</span>
            </label>
        </div>
    </fieldset>

    <div class="b-form__group{{ modifier }}">
        <label class="b-form__label" for="test-range">Input type="range"</label>
        <div class="b-form__range-container">
            <input class="b-form__range-input" type="range" id="testRange" name="testRange" min="0" max="20000" value="0" autocomplete="off">
            <output class="b-form__range-output" id="testRangeOutput" name="testRangeOutput">0</output>
        </div>
        <span class="b-form__message">{{ message }}</span>
    </div>

    <div class="b-form__group{{ modifier }}">
        <label class="b-form__label" for="select-dd">Select drop down:</label>
        <div class="b-form__select">
            <div class="b-form__select-arrow"></div>
            <div class="b-form__select-display">Please choose an option, this is truncated to look amazing</div>
            <select class="b-form__select-select" id="select-dd" name="select-dd">
                <option value="" disabled selected>Please choose an option, this is truncated to look amazing</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <span class="b-form__message">{{ message }}</span>
    </div>

    <div class="b-form__group{{ modifier }}">
        <label class="b-form__label" for="card_img2">Card Image 2</label>
        <div class="b-form__file-upload-container">
            <span class="b-form__file-upload">Upload a file</span>
            <input class="b-hide" type="file" id="card_img2" name="card_img2" autocomplete="off" data-multiple-caption="{count} files selected"
                multiple>
        </div>
        <span class="b-form__message">{{ message }}</span>
    </div>
</form>
 
{
  "modifier": " has-error",
  "message": "This is an example message"
}

States of the form will be classes that can be added to the .b-form__group element to illustrate to the user the state of elements in the form. These can be used in conjunction with alerts for better usability in forms.