Our UI development is under condtruction!

Radio

Radio Default


<div class="form-checks">
    <input class="radio radio-primary" type="radio" name="radio" checked />
    <input class="radio" type="radio" name="radio" />
    <input class="radio" type="radio" name="radio" />
    <input class="radio" type="radio" name="radio" />
    <input class="radio" type="radio" name="radio" />
    <input class="radio" type="radio" name="radio" />
    <input class="radio" type="radio" name="radio" />
</div>

Radio Fill


<div class="form-checks">
    <input class="radio radio-primary radio-filled" type="radio" name="radio-2" checked />
    <input class="radio radio-secondary radio-filled" type="radio" name="radio-2" />
    <input class="radio radio-success radio-filled" type="radio" name="radio-2" />
    <input class="radio radio-info radio-filled" type="radio" name="radio-2" />
    <input class="radio radio-warning radio-filled" type="radio" name="radio-2" />
    <input class="radio radio-danger radio-filled" type="radio" name="radio-2" />
    <input class="radio radio-dark radio-filled" type="radio" name="radio-2" />
</div>

Radio Outline Fill



<div class="form-checks">
    <input class="radio radio-primary radio-outline-filled" type="radio" name="radio-3" checked />
    <input class="radio radio-secondary radio-outline-filled" type="radio" name="radio-3" />
    <input class="radio radio-success radio-outline-filled" type="radio" name="radio-3" />
    <input class="radio radio-info radio-outline-filled" type="radio" name="radio-3" />
    <input class="radio radio-warning radio-outline-filled" type="radio" name="radio-3" />
    <input class="radio radio-danger radio-outline-filled" type="radio" name="radio-3" />
    <input class="radio radio-dark radio-outline-filled" type="radio" name="radio-3" />
</div>

Radio Outline Default



<div class="form-check m-10">
    <input class="radio" id="radio-01" type="radio" name="radio-4" checked />
    <label for="radio-01">Radio Outline</label>
</div>
<div class="form-check m-10">
    <input class="radio" id="radio-02" type="radio" name="radio-4" />
    <label for="radio-02">Radio Outline</label>
</div>
<div class="form-check m-10">
    <input class="radio" id="radio-03" type="radio" name="radio-4" />
    <label for="radio-03">Radio Outline</label>
</div>

Radio Outline Color



<div class="form-check m-10">
    <input class="radio radio-primary radio-outline" id="radio-1" type="radio" name="radio-5" checked />
    <label for="radio-1">Radio Outline</label>
</div>
<div class="form-check m-10">
    <input class="radio radio-secondary radio-outline" id="radio-2" type="radio" name="radio-5" />
    <label for="radio-2">Radio Outline</label>
</div>
<div class="form-check m-10">
    <input class="radio radio-success radio-outline" id="radio-3" type="radio" name="radio-5" />
    <label for="radio-3">Radio Outline</label>
</div>