Checkbox

Select a single or grouped options

Examples

Base

Show code

HTML

<section>
    <o-field>
        <o-checkbox label="Basic" />
    </o-field>

    <o-field>
        <o-checkbox v-model="checkbox">
            {{ checkbox }}
        </o-checkbox>
    </o-field>

    <o-field>
        <o-checkbox
            v-model="checkboxCustom"
            true-value="Yes"
            false-value="No">
            {{ checkboxCustom }}
        </o-checkbox>
    </o-field>

    <o-field>
        <o-checkbox :indeterminate="true"> Indeterminate </o-checkbox>
    </o-field>

    <o-field>
        <o-checkbox label="Disabled" disabled />
    </o-field>

    <o-field>
        <o-checkbox label="Required" required />
    </o-field>
</section>

JS

import { ref } from "vue";

const checkbox = ref(false);
const checkboxCustom = ref("Yes");

Variants

Show code

HTML

<section>
    <o-field>
        <o-checkbox :model-value="true" label="Default" />
    </o-field>

    <o-field>
        <o-checkbox :model-value="true" variant="primary" label="Primary" />
    </o-field>

    <o-field>
        <o-checkbox
            :model-value="true"
            variant="secondary"
            label="secondary" />
    </o-field>

    <o-field>
        <o-checkbox :model-value="true" variant="success" label="Success" />
    </o-field>

    <o-field>
        <o-checkbox :model-value="true" variant="info" label="Info" />
    </o-field>

    <o-field>
        <o-checkbox :model-value="true" variant="warning" label="Warning" />
    </o-field>

    <o-field>
        <o-checkbox :model-value="true" variant="danger" label="Danger" />
    </o-field>
</section>

Interminate

Show code

HTML

<section>
    <o-field>
        <o-checkbox indeterminate label="Default" />
    </o-field>

    <o-field>
        <o-checkbox variant="primary" indeterminate label="Primary" />
    </o-field>

    <o-field>
        <o-checkbox variant="secondary" indeterminate label="Secondary" />
    </o-field>

    <o-field>
        <o-checkbox variant="success" indeterminate label="Success" />
    </o-field>

    <o-field>
        <o-checkbox variant="info" indeterminate label="Info" />
    </o-field>

    <o-field>
        <o-checkbox variant="warning" indeterminate label="Warning" />
    </o-field>

    <o-field>
        <o-checkbox variant="danger" indeterminate label="Danger" />
    </o-field>
</section>

Sizes

Show code

HTML

<section>
    <o-field>
        <o-checkbox size="small" label="Small" />
    </o-field>

    <o-field>
        <o-checkbox label="Default" />
    </o-field>

    <o-field>
        <o-checkbox size="medium" label="Medium" />
    </o-field>

    <o-field>
        <o-checkbox size="large" label="Large" />
    </o-field>
</section>

Array

Show code

HTML

<section>
    <o-field>
        <o-checkbox
            v-model="checkboxGroup"
            native-value="Silver"
            label="Silver" />

        <o-checkbox
            v-model="checkboxGroup"
            native-value="Flint"
            label="Flint" />

        <o-checkbox
            v-model="checkboxGroup"
            native-value="Vane"
            label="Vane" />

        <o-checkbox
            v-model="checkboxGroup"
            native-value="Billy"
            label="Billy"
            disabled />
    </o-field>

    <p><b>Selection:</b> {{ checkboxGroup }}</p>
</section>

JS

import { ref } from "vue";

const checkboxGroup = ref(["Flint"]);

Class props

'Classes applied to the element'

Checkbox component

Select a single or grouped options

<o-checkbox></o-checkbox>

Props

Prop name	Description	Type	Values	Default
autocomplete	Same as native autocomplete options to use in HTML5 validation	string	-	From config: checkbox: {   autocomplete: "off" }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: boolean, state: ValidityState) => string)	-	""
disabled	Same as native disabled	boolean	-	false
falseValue	Overrides the returned value when it's not checked	string|number|boolean|object	-	false
indeterminate	Same as native indeterminate	boolean	-	false
label	Input label, unnecessary when default slot is used	string	-
v-model	The input value state	string|number|boolean|object|array	-
name	Same as native name	string	-
nativeValue	Same as native value	string|number|boolean|object	-
override	Override existing theme classes completely	boolean	-
required	Same as native required	boolean	-	false
size	Size of the control	string	small, medium, large	From config: checkbox: {   size: undefined }
trueValue	Overrides the returned value when it's checked	string|number|boolean|object	-	true
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: checkbox: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	value string | number | boolean | object | array - updated modelValue prop	modelValue prop two-way binding
input	value string | number | boolean | object | array - input value event Event - native event	on input change event
update:indeterminate	value boolean - updated indeterminate prop	indeterminate prop two-way binding
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event

Slots

Name	Description	Bindings
default	Content slot, default is label prop

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$checkbox-active-background-color	var(--#{$prefix}primary)
$checkbox-background-color	var(--#{$prefix}primary)
$checkbox-box-shadow	$control-box-shadow
$checkbox-border-color	var(--#{$prefix}primary)
$checkbox-border-style	solid
$checkbox-border-radius	var(--#{$prefix}base-border-radius)
$checkbox-border-width	2px
$checkbox-checked-box-shadow-length	0 0 0.5em
$checkbox-checked-box-shadow-opacity	0.8
$checkbox-checkmark-color	$primary-invert
$checkbox-disabled-opacity	var(--#{$prefix}base-disabled-opacity)
$checkbox-label-padding	0 0 0 0.5em
$checkbox-margin-sibiling	0.5em
$checkbox-size	1rem
$checkbox-line-height	1.5

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$checkbox-size	1.25em
$checkbox-colors	var.$colors
$checkbox-background-color	transparent
$checkbox-border-color	css.getVar("grey")
$checkbox-border-radius	css.getVar("radius")
$checkbox-border-width	2px
$checkbox-checkmark-color	css.getVar("primary-invert")
$checkbox-focus-color	hsl(from css.getVar("grey") h s l / 80%)
$checkbox-active-focus-color	hsl( from css.getVar("checkbox-active-background-color") h s l / 80%)
$checkbox-active-background-color	css.getVar("primary")
$checkbox-shadow	css.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.