Synto - Laravel Bootstrap 5 Premium Admin & Dashboard Template

Radios

Default radio

Default checked radio

<div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault"
            id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            Default radio
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault"
            id="flexRadioDefault2" checked="">
        <label class="form-check-label" for="flexRadioDefault2">
            Default checked radio
        </label>
    </div>

Disabled

Disabled radio

Disabled checked radio

<div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDisabled"
            id="flexRadioDisabled" disabled="">
        <label class="form-check-label" for="flexRadioDisabled">
            Disabled radio
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDisabled"
            id="flexRadioCheckedDisabled" checked="" disabled="">
        <label class="form-check-label" for="flexRadioCheckedDisabled">
            Disabled checked radio
        </label>
    </div>

Default (stacked)

Default radio

Disabled radio

<div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios"
            id="exampleRadios1" value="option1" checked="">
        <label class="form-check-label" for="exampleRadios1">
            Default radio
        </label>
    </div>
    <div class="form-check mb-0">
        <input class="form-check-input" type="radio" name="exampleRadios"
            id="exampleRadios3" value="option3" disabled="">
        <label class="form-check-label" for="exampleRadios3">
            Disabled radio
        </label>
    </div>

Radio Sizes

default

Medium

Large

<div class="form-check">
        <input class="form-check-input" type="radio" name="Radio" id="Radio-sm">
        <label class="form-check-label" for="Radio-sm">
            default
        </label>
    </div>
    <div class="form-check form-check-md">
        <input class="form-check-input" type="radio" name="Radio" id="Radio-md">
        <label class="form-check-label" for="Radio-md">
            Medium
        </label>
    </div>
    <div class="form-check form-check-lg">
        <input class="form-check-input" type="radio" name="Radio" id="Radio-lg" checked="">
        <label class="form-check-label" for="Radio-lg">
            Large
        </label>
    </div>

Inline

3 (disabled)


    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions"
            id="inlineRadio1" value="option1">
        <label class="form-check-label" for="inlineRadio1">1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions"
            id="inlineRadio2" value="option2">
        <label class="form-check-label" for="inlineRadio2">2</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions"
            id="inlineRadio3" value="option3" disabled>
        <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
    </div>

Without labels

<span>
        <input class="form-check-input" type="radio" name="radioNoLabel"
            id="radioNoLabel1" value="" aria-label="...">
    </span>

Reverse

Reverse radio

Disabled reverse radio

<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>

    <div class="form-check form-switch form-check-reverse">
        <input class="form-check-input" type="checkbox"
            id="flexSwitchCheckReverse">
        <label class="form-check-label" for="flexSwitchCheckReverse">Reverse
            switch
            checkbox input</label>
    </div>

Radio toggle buttons

Checked Radio Disabled Radio

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

    <input type="radio" class="btn-check" name="options" id="option2"
    >
    <label class="btn btn-primary m-1" for="option2">Radio</label>

    <input type="radio" class="btn-check" name="options" id="option3"
    disabled="">
    <label class="btn btn-primary m-1" for="option3">Disabled</label>

    <input type="radio" class="btn-check" name="options" id="option4"
    >
    <label class="btn btn-primary m-1" for="option4">Radio</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 Radios

Primary

Secondary

Warning

Info

Success

Danger

Dark

<div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="primaryRadio" id="primaryRadio" checked="">
        <label class="form-check-label" for="primaryRadio">
            Primary
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-secondary" type="radio" name="secondaryRadio" id="secondaryRadio" checked="">
        <label class="form-check-label" for="secondaryRadio">
            Secondary
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-warning" type="radio" name="warningRadio" id="warningRadio" checked="">
        <label class="form-check-label" for="warningRadio">
            Warning
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-info" type="radio" name="InfoRadio" id="InfoRadio" checked="">
        <label class="form-check-label" for="InfoRadio">
            Info
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-success" type="radio" name="successRadio" id="successRadio" checked="">
        <label class="form-check-label" for="successRadio">
            Success
        </label>
    </div>
    <div class="form-check mb-2">
        <input class="form-check-input form-checked-danger" type="radio" name="dangerRadio" id="dangerRadio" checked="">
        <label class="form-check-label" for="dangerRadio">
            Danger
        </label>
    </div>
    <div class="form-check mb-0">
        <input class="form-check-input form-checked-dark" type="radio" name="darkRadio" id="darkRadio" checked="">
        <label class="form-check-label" for="darkRadio">
            Dark
        </label>
    </div>

Outline Radios