<form role="form" class="form">
    <fieldset class="form__section">
        <legend>Legend</legend>
        <div class="form-group">
            <label for="basic-label" class="form-group__label">Input</label>
            <span class="pull-right ml--u-5"><a href="#" class="text-small">Explanation link</a></span>
            <p class="form-group__info-hint">Additional information</p>
            <input type="text" id="basic-label" class="form-control">
        </div>
        <div class="form-group">
            <label for="basic-select" class="form-group__label">Select</label>
            <select id="basic-select" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="form-group">
            <label for="basic-file" class="form-group__label">File</label>
            <div class="form-control">
                <input type="file" id="basic-file">
            </div>
        </div>
        <p>
            <span class="icon icon--info icon--left" aria-hidden="true"></span>
            Maximum attachment size is 10 MB
        </p>
        <p>
            <a href="#">+ Attach more files</a>
        </p>
        <div class="form-group">
            <input id="form-check1" type="checkbox" checked="checked" name="form-check1">
            <label for="form-check1">I agree with your opinion and have nothing to say</label>
        </div>
    </fieldset>
    <button type="submit" class="btn btn--primary">Save changes</button>
</form>

<form role="form">
    <div class="form-group checkbox-group {$modifiers}" style="max-width: 100%;">
        <div class="checkbox-group__control">
            <input id="check1" type="checkbox" checked="checked" name="check1">
            <label for="check1">Checkbox 1</label>
        </div>
        <div class="checkbox-group__control">
            <input id="check2" type="checkbox" name="check2">
            <label for="check2">Checkbox 2</label>
        </div>
        <div class="checkbox-group__control">
            <input id="check3" type="checkbox" name="check3" disabled>
            <label for="check3">Checkbox 3 (disabled)</label>
        </div>
        <div class="checkbox-group__control">
            <input id="check4" type="checkbox" name="check4" disabled checked>
            <label for="check4">Checkbox 4 (disabled checked)</label>
        </div>
    </div>
</form>

<form role="form">
    <div class="form-group radio-group {$modifiers}" style="max-width: 100%;">
        <div class="radio-group__control">
            <input id="radio1" type="radio" name="radiogroup" checked>
            <label for="radio1">Radio button 1</label>
        </div>
        <div class="radio-group__control">
            <input id="radio2" type="radio" name="radiogroup">
            <label for="radio2">Radio button 2</label>
        </div>
        <div class="radio-group__control">
            <input id="radio3" type="radio" name="radiogroup" disabled>
            <label for="radio3">Radio button 3 (disabled)</label>
        </div>
        <div class="radio-group__control">
            <input id="radio4" type="radio" name="radiogroup-disabled" disabled checked>
            <label for="radio4">Radio button 4 (disabled checked)</label>
        </div>
    </div>
</form>

<form role="form" class="form">
    <a href="#" class="btn btn--primary">Primary action</a>
    <a href="#" class="secondary-action">Secondary action</a>
</form>

<form role="form" class="form">
    <fieldset class="form__section">
        <legend>Legend</legend>
        <div class="form-group form-group--error">
            <label for="basic-label-error" class="form-group__label required">Input</label>
            <input type="text" id="basic-label-error" class="form-control" />
            <p class="form-group__hint">Don't leave me blank, please!</p>
        </div>
        <div class="form-group form-group--error">
            <label for="basic-select-error" class="form-group__label required">Select</label>
            <select id="basic-select-error" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <p class="form-group__hint">I don't want to die alone!</p>
        </div>
        <div class="form-group form-group--error">
            <label for="basic-textarea-error" class="form-group__label required">Textarea</label>
            <textarea id="basic-textarea-error" class="form-control" rows="8"></textarea>
            <p class="form-group__hint">I feel so empty!</p>
        </div>
    </fieldset>
    <fieldset class="form__section">
        <div class="form-group form-group--error">
            <span class="form-group__label required">Required radio buttons</span>
            <div class="radio-group">
                <div class="radio-group__control">
                    <input id="radio1-error" type="radio" name="radiogroup_error">
                    <label for="radio1-error">Radio button 1</label>
                </div>
                <div class="radio-group__control">
                    <input id="radio2-error" type="radio" name="radiogroup_error">
                    <label for="radio2-error">Radio button 2</label>
                </div>
                <div class="radio-group__control">
                    <input id="radio3-error" type="radio" name="radiogroup_error">
                    <label for="radio3-error">Radio button 3</label>
                </div>
            </div>
            <p class="form-group__hint">Nobody wants to touch us!</p>
        </div>
    </fieldset>
    <fieldset class="form__section">
        <div class="form-group form-group--error">
            <span class="form-group__label required">Required checkboxes</span>
            <div class="checkbox-group checkbox-group--inline">
                <div class="checkbox-group__control">
                    <input id="check1-error" type="checkbox" name="check1_error">
                    <label for="check1-error">Checkbox 1</label>
                </div>
                <div class="checkbox-group__control">
                    <input id="check2-error" type="checkbox" name="check2_error">
                    <label for="check2-error">Checkbox 2</label>
                </div>
                <div class="checkbox-group__control">
                    <input id="check3-error" type="checkbox" name="check3_error">
                    <label for="check3-error">Checkbox 3</label>
                </div>
            </div>
            <p class="form-group__hint">Why are we the only three left behind?</p>
        </div>
    </fieldset>
    <fieldset class="form__section">
        <div class="form-group form-group--error">
            <span class="required"><!--
                --><input id="check1-agree" type="checkbox" name="check1_agree">
                <label for="check1-agree">I agree with</label> <a href="#">terms and conditions</a>.<!--
            --></span>
            <p class="form-group__hint">Why don't you trust us?</p>
        </div>
    </fieldset>
    <button type="submit" class="btn btn--primary">Errors fixed, let me in!</button>
</form>

<div class="form-group">
    <input type="checkbox" class="switch" id="input-switch">
    <label for="input-switch">Switch label</label>
</div>
<h2>
    <input type="checkbox" class="switch" id="input-switch2">
    <label for="input-switch2">Switch label</label>
</h2>
<p>
    <input type="checkbox" class="switch" id="input-switch3">
    <label for="input-switch3">Switch label</label>
</p>

<div class="form-group form-group--small">
    <label for="label-input-addon" class="form-group__label">Price</label>
    <div class="input-group">
        <input type="text" value="30000" id="label-input-addon" class="form-control">
        <div class="input-group-addon input-group-addon--has-control">
            <select class="form-control">
                <option>CZK</option>
                <option>EUR</option>
            </select>
        </div>
    </div>
</div>
<div class="form-group form-group--small">
    <label for="label-calendar" class="form-group__label">Date</label>
    <div class="form-group__control-wrapper">
        <input type="text" id="label-calendar" class="form-control form-control--action-right" value="6. 8. 2015">
        <a href="#" class="form-group__control-action form-group__control-action--right" title="Show calendar">
            <span class="icon icon--calendar icon--medium icon--middle" aria-hidden="true"></span>
            <span class="visually-hidden">Show calendar</span>
        </a>
    </div>
</div>
<div class="form-group form-group--xsmall">
    <label for="basic-label2" class="form-group__label">Validity</label>
    <div class="form-group__control-wrapper">
        <input type="text" id="basic-label2" class="form-control text-center form-control--action-left form-control--action-right" value="12">
        <span class="form-group__control-unit">months</span>
        <a href="#" class="form-group__control-action form-group__control-action--left">
            <span class="icon icon--minus icon--medium icon--middle" aria-hidden="true"></span>
            <span class="visually-hidden">−</span>
        </a>
        <a href="#" class="form-group__control-action form-group__control-action--right">
            <span class="icon icon--plus icon--medium icon--middle" aria-hidden="true"></span>
            <span class="visually-hidden">+</span>
        </a>
    </div>
</div>