# Checkbox

Select a single or grouped options

edit on github

# Examples

# Base

# Variants

# Array

# Props

Prop name Description Type Values Default
v-model string|number|boolean|array -
nativeValue Same as native value string|number|boolean -
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color
disabled Same as native disabled boolean -
required boolean -
name Same as native name string -
size Size of the control, optional string small, medium, large
indeterminate Same as native indeterminate boolean -
trueValue Overrides the returned value when it's checked string|number|boolean - true
falseValue Overrides the returned value when it's not checked string|number|boolean - false
rootClass string -
disabledClass string -
checkClass string -
labelClass string -
sizeClass string -
variantClass string -

# Events

Event name Type Description
input undefined

# Slots

Name Description Bindings

# Style

CSS Variable SASS Variable Default
--oruga-checkbox-active-background-color $checkbox-active-background-color $primary
--oruga-checkbox-background-color $checkbox-background-color transparent
--oruga-checkbox-border-color $checkbox-border-color $grey
--oruga-checkbox-border-radius $checkbox-border-radius $base-border-radius
--oruga-checkbox-border-width $checkbox-border-width 2px
--oruga-checkbox-checked-box-shadow-color $checkbox-checked-box-shadow-color $checkbox-active-background-color
--oruga-checkbox-checked-box-shadow-length $checkbox-checked-box-shadow-length 0 0 0.5em
--oruga-checkbox-checked-box-shadow-opacity $checkbox-checked-box-shadow-opacity 0.8
--oruga-checkbox-checkmark-color $checkbox-checkmark-color $primary-invert
--oruga-checkbox-disabled-opacity $checkbox-disabled-opacity $base-disabled-opacity
--oruga-checkbox-focus-sibiling-box-shadow $checkbox-focus-sibiling-box-shadow $checkbox-checked-box-shadow-length rgba($grey, $checkbox-checked-box-shadow-opacity)
--oruga-checkbox-label-padding $checkbox-label-padding 0 0 0 .5em
--oruga-checkbox-margin-sibiling $checkbox-margin-sibiling 0.5em
--oruga-checkbox-size $checkbox-size 1.25em
--oruga-checkbox-line-height $checkbox-line-height 1.25