Forms: Default

<form class="hgm-form">
    <fieldset>

        <legend>Legend</legend>

        <div class="mb-1">
            <label for="exampleInput">Example Input</label>
            <input type="text" id="exampleInput" placeholder="Input">
        </div>

        <div class="mb-1">
            <label for="exampleSelect">Example Select</label>
            <select id="exampleSelect">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>

        <div class="mb-1">
            <label for="exampleTextarea">Example Textarea</label>
            <textarea id="exampleTextarea" rows="5" placeholder="Textarea"></textarea>
        </div>

        <div class="mb-1">
            <div class="hgm-form__check">
                <input id="exampleRadio" type="radio" name="example_radio" />
                <label for="exampleRadio">Example radio</label>
            </div>
            <div class="hgm-form__check">
                <input id="exampleRadio2" type="radio" name="example_radio" />
                <label for="exampleRadio2">Example radio 2</label>
            </div>
        </div>

        <div class="mb-1">
            <div class="hgm-form__check">
                <input id="exampleCheckbox" type="checkbox" />
                <label for="exampleCheckbox">Example checkbox</label>
            </div>
            <div class="hgm-form__check">
                <input id="exampleCheckbox2" type="checkbox" checked />
                <label for="exampleCheckbox2">Example checkbox checked</label>
            </div>
        </div>

        <div class="mb-1">
            <div class="hgm-form__switch">
                <input id="exampleSwitch1" name="switch_one" type="checkbox" />
                <label for="exampleSwitch1">
                    <span class="switch-rail">
                        <span class="switch-slider"></span>
                    </span>
                    Example switch
                </label>
            </div>
        </div>

        <div class="mb-1">
            <div class="hgm-form__switch">
                <input id="exampleSwitch2" name="switch_two" type="checkbox" disabled />
                <label for="exampleSwitch2">
                    <span class="switch-rail">
                        <span class="switch-slider"></span>
                    </span>
                    Example switch - Disabled
                </label>
            </div>
        </div>

        <div class="mb-1">
            <div class="hgm-form__switch">
                <input id="exampleSwitch3" name="switch_three" type="checkbox" disabled checked="checked" />
                <label for="exampleSwitch3">
                    <span class="switch-rail">
                        <span class="switch-slider"></span>
                    </span>
                    Example switch - Disabled (checked)
                </label>
            </div>
        </div>

        <div class="mb-1">
            <label for="exampleRange">Example Range</label>
            <div class="d-flex justify-content-between align-items-center">
                <div class="col-sm-1"><span>0</span></div>
                <div class="col-sm-10"><input id="exampleRange" type="range" value="2" min="0" max="100" step="1"></div>
                <div class="col-sm-1" style="text-align:right"><span>100</span></div>
            </div>
        </div>

        <div class="mb-1">
            <label for="exampleRange2">Example Range with Value</label>
            <div class="d-flex justify-content-between align-items-center">
                <div class="col-sm-1"><span>0</span></div>
                <div class="col-sm-10 hgm-range-wrap">
                    <input id="exampleRange2" type="range" value="2" min="0" max="100" step="1">
                </div>
                <div class="col-sm-1" style="text-align:right"><span>100</span></div>
            </div>
        </div>

        <div class="mb-1">
            <label for="exampleRange3">Example Range with Value (bottom)</label>
            <div class="d-flex justify-content-between align-items-center">
                <div class="col-sm-1"><span>0</span></div>
                <div class="col-sm-10 hgm-range-wrap bottom">
                    <input id="exampleRange3" type="range" value="2" min="0" max="100" step="1">
                </div>
                <div class="col-sm-1" style="text-align:right"><span>100</span></div>
            </div>
        </div>

        <div class="mb-1">
            <label for="exampleRange4">Example Range with Value Disabled</label>
            <div class="d-flex justify-content-between align-items-center">
                <div class="col-sm-1"><span>0</span></div>
                <div class="col-sm-10 hgm-range-wrap bottom">
                    <input id="exampleRange4" type="range" value="2" min="0" max="100" step="1" disabled>
                </div>
                <div class="col-sm-1" style="text-align:right"><span>100</span></div>
            </div>
        </div>

    </fieldset>
</form>