# Checkbox
Select a single or grouped options
# Examples
# Base
# Variants
# Array
# Class props
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 | |
variantClass | Class of the checkbox variant. | variant | primary |
# 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 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 |