Skip to content

Checkbox

Select a single or grouped options

## Examples

Base

Show code

Variants

Show code

Interminate

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
autocompleteSame as native autocomplete options to use in HTML5 validationstring-
From config:
checkbox: {
  autocomplete: "off"
}
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: unknown, state: ValidityState) => string)-""
disabledSame as native disabledboolean-false
falseValueOverrides the returned value when it's not checkedunknown-
idSame as native id. Also set the for label for o-field wrapper - default is an uuid.string-useId()
indeterminateSame as native indeterminateboolean-false
labelInput label, unnecessary when default slot is usedstring-
v-modelThe input value state, use v-model to make it two-way bindingunknown-
nameSame as native namestring-
nativeValueSame as native valueunknown-
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 checkedunknown-
useHtml5ValidationEnable HTML 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
checkbox: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:model-valuevalue T | T[] - updated modelValue propmodelValue prop two-way binding
inputvalue T | T[] - input value
event Event - native event
on input change event
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

SASS VariableDefault
$checkbox-active-background-colorvar(--#{$prefix}primary)
$checkbox-background-colorvar(--#{$prefix}primary)
$checkbox-box-shadow$control-box-shadow
$checkbox-border-colorvar(--#{$prefix}primary)
$checkbox-border-stylesolid
$checkbox-border-radiusvar(--#{$prefix}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-opacityvar(--#{$prefix}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

SASS VariableDefault
$checkbox-size1.25em
$checkbox-colorsvar.$colors
$checkbox-background-colortransparent
$checkbox-border-colorcss.getVar("grey")
$checkbox-border-radiuscss.getVar("radius")
$checkbox-border-width2px
$checkbox-checkmark-colorcss.getVar("primary-invert")
$checkbox-focus-colorhsl(from css.getVar("grey") h s l / 80%)
$checkbox-active-focus-colorhsl( from css.getVar("checkbox-active-background-color") h s l / 80%)
$checkbox-active-background-colorcss.getVar("primary")
$checkbox-shadowcss.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

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

Released under the MIT License.