Skip to content
On this page

Checkbox

Select a single or grouped options

Base

Show code

Variants

Show code

Array

Selection: [ "Flint" ]

Show code

Class props


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


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

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-checkbox-active-background-color$checkbox-active-background-color$primary
--oruga-checkbox-background-color$checkbox-background-color$primary
--oruga-checkbox-border-color$checkbox-border-color$primary
--oruga-checkbox-border-radius$checkbox-border-radius$base-border-radius
--oruga-checkbox-border-width$checkbox-border-width2px
--oruga-checkbox-checked-box-shadow-length$checkbox-checked-box-shadow-length0 0 0.5em
--oruga-checkbox-checked-box-shadow-opacity$checkbox-checked-box-shadow-opacity0.8
--oruga-checkbox-checkmark-color$checkbox-checkmark-color$primary-invert
--oruga-checkbox-disabled-opacity$checkbox-disabled-opacity$base-disabled-opacity
--oruga-checkbox-label-padding$checkbox-label-padding0 0 0 0.5em
--oruga-checkbox-margin-sibiling$checkbox-margin-sibiling0.5em
--oruga-checkbox-size$checkbox-size1rem
--oruga-checkbox-line-height$checkbox-line-height1.5

Released under the MIT License.