Skip to content

Checkbox

Select a single or grouped options

Examples

Base

Show code

Variants

Show code

Sizes

Show code

Array

Show code

Class props

'Classes applied to the element'

Checkbox component

Select a single or grouped options

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

Props

Prop nameDescriptionTypeValuesDefault
ariaLabelledbyAccessibility label to establish relationship between the checkbox and control labelstring-Default function (see source code)
autocompleteSame as native autocomplete options to use in HTML5 validationstring-
From config:
checkbox: {
  autocomplete: "off"
}
disabledSame as native disabledboolean-false
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-
nameSame as native namestring-
nativeValueSame as native valuestring|number|boolean-
overrideOverride existing theme classes completelyboolean-
requiredSame as native requiredboolean-false
sizeSize of the controlstringsmall, medium, large
From config:
checkbox: {
  size: undefined
}
trueValueOverrides the returned value when it's checkedstring|number|boolean-true
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
v-modelstring|number|boolean|array-
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
checkbox: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:modelValuevalue string, number, boolean, array - updated modelValue propmodelValue prop two-way binding
inputvalue string, number, boolean, array - input value
event Event - native event
on input change event
update:indeterminatevalue boolean - updated indeterminate propindeterminate prop two-way binding
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event

Slots

NameDescriptionBindings
defaultContent slot, default is label prop

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.