# Checkbox

Select a single or grouped options


edit on github

# Examples

# Base

# Variants

# Array

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
checkCheckedClass Class of the checkbox when checked.
checkClass Class of the checkbox.
checkIndeterminateClass Class when checkbox is indeterminate. indeterminate
checkedClass Class of the root element when checked.
disabledClass Class when checkbox is disabled. disabled
labelClass Class of the checkbox label.
rootClass Class of the root element.
sizeClass Class of the checkbox size. size small
medium
large
variantClass Class of the checkbox variant. variant primary
info
warning
danger


# Props

Prop name Description Type Values Default
ariaLabelledby Accessibility label to establish relationship between the checkbox and control label string -
autocomplete string -
disabled Same as native disabled boolean -
falseValue Overrides the returned value when it's not checked string|number|boolean - false
indeterminate Same as native indeterminate boolean - false
name Same as native name string -
nativeValue Same as native value string|number|boolean|array -
override Override classes boolean - false
required boolean -
size Size of the control, optional string small, medium, large
trueValue Overrides the returned value when it's checked string|number|boolean - true
v-model string|number|boolean|array -
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Events

Event name Properties Description
input

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--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-width 2px
--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-label-padding $checkbox-label-padding 0 0 0 .5em
--oruga-checkbox-margin-sibiling $checkbox-margin-sibiling 0.5em
--oruga-checkbox-size $checkbox-size 1rem
--oruga-checkbox-line-height $checkbox-line-height 1.5