BoxedCheck CSS Library Examples

A CSS library that converts normal checkboxes and radio buttons into checkable (toggleable) elements (like buttons and cards) for better UX.

Radio:
Checkbox:

Themes

You can use the .boxed-check-* classes to colorize BoxedCheck.

<div class="boxed-check-group boxed-check-default"> ... </div>
<div class="boxed-check-group boxed-check-secondary"> ... </div>
<div class="boxed-check-group boxed-check-primary"> ... </div>
<div class="boxed-check-group boxed-check-success"> ... </div>
<div class="boxed-check-group boxed-check-danger"> ... </div>
<div class="boxed-check-group boxed-check-warning"> ... </div>
<div class="boxed-check-group boxed-check-info"> ... </div>
<div class="boxed-check-group boxed-check-dark"> ... </div>

Themes With Outline

Replace the default modifier classes with the .boxed-check-outline-* ones to remove all background images and colors on any BoxedCheck.

<div class="boxed-check-group boxed-check-outline-default"> ... </div>
<div class="boxed-check-group boxed-check-outline-secondary"> ... </div>
<div class="boxed-check-group boxed-check-outline-primary"> ... </div>
<div class="boxed-check-group boxed-check-outline-success"> ... </div>
<div class="boxed-check-group boxed-check-outline-danger"> ... </div>
<div class="boxed-check-group boxed-check-outline-warning"> ... </div>
<div class="boxed-check-group boxed-check-outline-info"> ... </div>
<div class="boxed-check-group boxed-check-outline-dark"> ... </div>

Using Custom Layout

Adding custom Layout into .boxed-check-label.

<div class="boxed-check-group boxed-check-success">
    <label class="boxed-check">
        <input class="boxed-check-input" type="radio" name="radio-overview-custom">
        <div class="boxed-check-label" style="text-align:center;">
            <h2>Breakfast</h2>
            <span>Good Morning</span>
        </div>
    </label>
    <label class="boxed-check">
        <input class="boxed-check-input" type="radio" name="radio-overview-custom">
        <div class="boxed-check-label" style="text-align:center;">
            <h2>Lunch</h2>
            <span>Good Afternoon</span>
        </div>
    </label>
    <label class="boxed-check">
        <input class="boxed-check-input" type="radio" name="radio-overview-custom">
        <div class="boxed-check-label" style="text-align:center;">
            <h2>Supper</h2>
            <span>Good Evening</span>
        </div>
    </label>
</div>

Contact

GitHub Issue
Wechat contact wechat
Email [email protected]
QQ 450183439

Donate

Your donation is a great encouragement and support to the project. We will continue to develop and maintain.

donate donate