Skip to content
On this page

Checkbox

Select a single or grouped options

Examples

Base

Show code

Variants

Show code

Sizes

Show code

Array

Selection: [ "Flint" ]

Show code

Class props

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
checkCheckedClassClass of the checkbox when checked.
checkClassClass of the checkbox.
checkIndeterminateClassClass when checkbox is indeterminate.indeterminate
checkedClassClass of the root element when checked.
disabledClassClass when checkbox is disabled.disabled
labelClassClass of the checkbox label.
rootClassClass of the root element.
sizeClassClass of the checkbox size.sizesmall
medium
large
variantClassClass of the checkbox variant.variantprimary
info
warning
danger

Checkbox component

html
<o-checkbox></o-checkbox>

Props

Prop nameDescriptionTypeValuesDefault
ariaLabelledbyAccessibility label to establish relationship between the checkbox and control labelstring-
autocompletestring-
disabledSame as native disabledboolean-
falseValueOverrides the returned value when it's not checkedstring|number|boolean-false
indeterminateSame as native indeterminateboolean-false
labelInput label, unnecessary when default slot is usedstring-undefined
nameSame as native namestring-
nativeValueSame as native valuestring|number|boolean|array-
overrideboolean-
requiredboolean-
sizeSize of the control, optionalstringsmall, medium, large
trueValueOverrides the returned value when it's checkedstring|number|boolean-true
v-modelstring|number|boolean|array-
variantColor of the control, optionalstringprimary, info, success, warning, danger, and any other custom color

Events

Event namePropertiesDescription
update:modelValue
input

Slots

NameDescriptionBindings
default

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$checkbox-active-background-color$primary
$checkbox-background-color$primary
$checkbox-border-color$primary
$checkbox-border-radius$base-border-radius
$checkbox-border-width2px
$checkbox-checked-box-shadow-length0 0 0.5em
$checkbox-checked-box-shadow-opacity0.8
$checkbox-checkmark-color$primary-invert
$checkbox-disabled-opacity$base-disabled-opacity
$checkbox-label-padding0 0 0 0.5em
$checkbox-margin-sibiling0.5em
$checkbox-size1rem
$checkbox-line-height1.5

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$checkbox-active-background-color$primary
$checkbox-background-color$primary
$checkbox-border-color$primary
$checkbox-border-radius$base-border-radius
$checkbox-border-width2px
$checkbox-checked-box-shadow-length0 0 0.5em
$checkbox-checked-box-shadow-opacity0.8
$checkbox-checkmark-color$primary-invert
$checkbox-disabled-opacity$base-disabled-opacity
$checkbox-label-padding0 0 0 0.5em
$checkbox-margin-sibiling0.5em
$checkbox-size1rem
$checkbox-line-height1.5

See ➜ 📄 Full scss file

Current theme ➜ Bulma

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

Current theme ➜ Bootstrap

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

Released under the MIT License.