RADIO ÉS CHECKBOX ELEMEK

Normál checkbox

html
<div class="form-group">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="ch1" name="ch1" value="" aria-label="leíró szöveg" aria-checked="false"> checkbox
        </label>
    </div>
</div>
css
.form-group {
    margin-bottom: 25px;
}
.control-label, label {
    text-transform: none;
    font-weight: 400;
    font-size: 1rem;
}
.checkbox {
    margin-top: 0;
}

inaktív checkbox

html
<div class="form-group">
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" id="ch2" name="ch2"  value="" disabled="disabled" aria-label="leíró szöveg" aria-checked="false"> checkbox is disabled
        </label>
    </div>
</div>
css
.form-group {
    margin-bottom: 25px;
}
.checkbox {
    margin-top: 0;
}
.control-label, label {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1rem;
}

Radio, kiválasztó gombok

html
<div class="form-group">
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="" aria-label="leíró szöveg" aria-checked="false">radio 1
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="checked" aria-label="leíró szöveg" aria-checked="true"> radio 2
        </label>
    </div>
    <div class="radio disabled">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" aria-label="leíró szöveg" aria-checked="false"> radio disabled
        </label>
    </div>
</div>
css
.control-label, label {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1rem;
}