bootstrap-vue/src/components/form-checkbox/fixtures/form-checkbox.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">
    <b-form-checkbox v-model="state" value="accepted" unchecked-value="not_accepted">
        I accept terms and use
    </b-form-checkbox>
    <div>State: <strong>{{state}}</strong></div>

    <br><br>

    <b-form-checkbox-group v-model="checked" :options="['One', 'Two', 'Three']">
    </b-form-checkbox-group>
    <div>Checked: <strong>{{checked}}</strong></div>

    <br><br>

    <b-form-checkbox-group v-model="checked">
        <b-form-checkbox value="One">One</b-form-checkbox>
        <b-form-checkbox value="Two">Two</b-form-checkbox>
        <b-form-checkbox value="Three">Three</b-form-checkbox>
    </b-form-checkbox-group>
    <div>Checked: <strong>{{checked}}</strong></div>

    <br><br>

    <b-form-checkbox-group v-model="checked" stacked :options="['One', 'Two', 'Three']">
    </b-form-checkbox-group>
    <div>Checked: <strong>{{checked}}</strong></div>

    <br><br>

    <b-form-checkbox-group v-model="checked" buttons :options="['One', 'Two', 'Three']">
    </b-form-checkbox-group>
    <div>Checked: <strong>{{checked}}</strong></div>

    <br><br>

    <b-form-checkbox-group v-model="checked" buttons size="lg" button-variant="primary" :options="['One', 'Two', 'Three']">
    </b-form-checkbox-group>
    <div>Checked: <strong>{{checked}}</strong></div>
    
    <br><br>

    <b-form-checkbox indeterminate>
        Indeterminate
    </b-form-checkbox>

</div>