Synto - Laravel Bootstrap 5 Premium Admin & Dashboard Template

Checks

Default checkbox

Checked checkbox

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
            Default checkbox
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked"
            checked>
        <label class="form-check-label" for="flexCheckChecked">
            Checked checkbox
        </label>
    </div>

Disabled

Disabled checkbox

Disabled checked checkbox

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled"
            disabled="">
        <label class="form-check-label" for="flexCheckDisabled">
            Disabled checkbox
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value=""
            id="flexCheckCheckedDisabled" checked="" disabled="">
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked checkbox
        </label>
    </div>

Default (stacked)

Default checkbox

Disabled checkbox

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
            Default checkbox
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2"
            disabled="">
        <label class="form-check-label" for="defaultCheck2">
            Disabled checkbox
        </label>
    </div>

Checkbox Sizes

Default

Medium

Large

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm" checked="">
        <label class="form-check-label" for="checkebox-sm">
            Default
        </label>
    </div>
    <div class="form-check form-check-md d-flex align-items-center">
        <input class="form-check-input" type="checkbox" value="" id="checkebox-md" checked="">
        <label class="form-check-label" for="checkebox-md">
            Medium
        </label>
    </div>
    <div class="form-check form-check-lg d-flex align-items-center">
        <input class="form-check-input" type="checkbox" value="" id="checkebox-lg" checked="">
        <label class="form-check-label" for="checkebox-lg">
            Large
        </label>
    </div>

Inline

3 (disabled)

<div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1"
            value="option1">
        <label class="form-check-label" for="inlineCheckbox1">1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2"
            value="option2">
        <label class="form-check-label" for="inlineCheckbox2">2</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox3"
            value="option3" disabled>
        <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
    </div>

Without labels

<span class="me-3">
        <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value=""
            aria-label="...">
    </span>
    <span>

Reverse

Reverse checkbox

Disabled reverse checkbox

<div class="form-check form-check-reverse mb-3">
        <input class="form-check-input" type="checkbox" value=""
            id="reverseCheck1">
        <label class="form-check-label" for="reverseCheck1">
            Reverse checkbox
        </label>
    </div>
    <div class="form-check form-check-reverse mb-3">
        <input class="form-check-input" type="checkbox" value=""
            id="reverseCheck2" disabled="">
        <label class="form-check-label" for="reverseCheck2">
            Disabled reverse checkbox
        </label>
    </div>

Checkbox toggle buttons

Single toggle Checked Disabled

<input type="checkbox" class="btn-check" id="btn-check">
        <label class="btn btn-primary m-1" for="btn-check">Single toggle</label>
        <input type="checkbox" class="btn-check" id="btn-check-2" checked
        >
        <label class="btn btn-primary m-1" for="btn-check-2">Checked</label>
        <input type="checkbox" class="btn-check" id="btn-check-3"
            disabled>
        <label class="btn btn-primary m-1" for="btn-check-3">Disabled</label>

Outlined styles

Single toggle
Checked
Checked success radio Danger radio

<input type="checkbox" class="btn-check" id="btn-check-outlined">
    <label class="btn btn-outline-primary mb-3" for="btn-check-outlined">Single
        toggle</label><br>

    <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked
        >
    <label class="btn btn-outline-secondary mb-3"
        for="btn-check-2-outlined">Checked</label><br>

    <input type="radio" class="btn-check" name="options-outlined" id="success-outlined"
        checked>
    <label class="btn btn-outline-success m-1" for="success-outlined">Checked success
        radio</label>

    <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined"
        >
    <label class="btn btn-outline-danger m-1" for="danger-outlined">Danger radio</label>

Colored Checkboxes

Primary

Secondary

Warning

Info

Success

Danger

Dark

<div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="" id="primaryChecked" checked="">
        <label class="form-check-label" for="primaryChecked">
            Primary
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-secondary" type="checkbox" value="" id="secondaryChecked" checked="">
        <label class="form-check-label" for="secondaryChecked">
            Secondary
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-warning" type="checkbox" value="" id="warningChecked" checked="">
        <label class="form-check-label" for="warningChecked">
            Warning
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-info" type="checkbox" value="" id="infoChecked" checked="">
        <label class="form-check-label" for="infoChecked">
            Info
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-success" type="checkbox" value="" id="successChecked" checked="">
        <label class="form-check-label" for="successChecked">
            Success
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-danger" type="checkbox" value="" id="dangerChecked" checked="">
        <label class="form-check-label" for="dangerChecked">
            Danger
        </label>
    </div>
    <div class="form-check mb-0">
        <input class="form-check-input form-checked-dark" type="checkbox" value="" id="darkChecked" checked="">
        <label class="form-check-label" for="darkChecked">
            Dark
        </label>
    </div>

Outline Checkboxes