Forms

<form class="#">
    <div class="row vertical-gap sm-gap">
        <div class="col-12">
            <label for="exampleBase1">Email</label>
            <input type="email" class="form-control" id="exampleBase1" placeholder="Email">
        </div>

        <div class="col-12">
            <label for="exampleBase2">With Icon</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <span data-feather="at-sign" class="rui-icon rui-icon-stroke-1_5"></span>
                    </div>
                </div>
                <input type="text" class="form-control" id="exampleBase2" placeholder="Email">
            </div>
        </div>

        <fieldset class="col-12" disabled>
            <label for="exampleBase3">Disabled</label>
            <input type="email" class="form-control" id="exampleBase3" placeholder="Email">
        </fieldset>
    </div>
</form>

<form class="#">
    <div class="row vertical-gap sm-gap">
        <label for="exampleGroup1" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="exampleGroup1" placeholder="Email">
        </div>

        <label for="exampleGroup2" class="col-sm-2 col-form-label">With Icon</label>
        <div class="col-sm-10">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <span data-feather="at-sign" class="rui-icon rui-icon-stroke-1_5"></span>
                    </div>
                </div>
                <input type="text" class="form-control" id="exampleGroup2" placeholder="Email">
            </div>
        </div>

        <div class="col-12">
            <fieldset disabled>
                <div class="row vertical-gap sm-gap">
                    <label for="exampleGroup3" class="col-sm-2 col-form-label">Disabled</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="exampleGroup3" placeholder="Email">
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</form>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Checkbox</label>
</div>

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mt-5">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
    <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio mt-5">
    <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
    <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch mt-5">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

<select class="custom-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">