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
## Checkbox component
Select a single or grouped options
html
<o-checkbox></o-checkbox>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - | From config: checkbox: { |
customValidity | Custom HTML 5 validation error to set on the form control | string | ((currentValue: unknown, state: ValidityState) => string) | - | "" |
disabled | Same as native disabled | boolean | - | false |
falseValue | Overrides the returned value when it's not checked | unknown | - | |
id | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string | - | useId() |
indeterminate | Same as native indeterminate | boolean | - | false |
label | Input label, unnecessary when default slot is used | string | - | |
v-model | The input value state, use v-model to make it two-way binding | unknown | - | |
name | Same as native name | string | - | |
nativeValue | Same as native value | unknown | - | |
override | Override existing theme classes completely | boolean | - | |
required | Same as native required | boolean | - | false |
size | Size of the control | string | small , medium , large | From config: checkbox: { |
trueValue | Overrides the returned value when it's checked | unknown | - | |
useHtml5Validation | Enable HTML 5 native validation | boolean | - | From config: { |
variant | Color of the control | string | primary , info , success , warning , danger , and any other custom color | From config: checkbox: { |
Events
Event name | Properties | Description |
---|---|---|
update:model-value | value T | T[] - updated modelValue prop | modelValue prop two-way binding |
input | value T | T[] - input valueevent Event - native event | on input change event |
focus | event Event - native event | on input focus event |
blur | event Event - native event | on input blur event |
invalid | event Event - native event | on input invalid event |
Slots
Name | Description | Bindings |
---|---|---|
default | Content slot, default is label prop |
## Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$checkbox-active-background-color | var(--#{$prefix}primary) |
$checkbox-background-color | var(--#{$prefix}primary) |
$checkbox-box-shadow | $control-box-shadow |
$checkbox-border-color | var(--#{$prefix}primary) |
$checkbox-border-style | solid |
$checkbox-border-radius | var(--#{$prefix}base-border-radius) |
$checkbox-border-width | 2px |
$checkbox-checked-box-shadow-length | 0 0 0.5em |
$checkbox-checked-box-shadow-opacity | 0.8 |
$checkbox-checkmark-color | $primary-invert |
$checkbox-disabled-opacity | var(--#{$prefix}base-disabled-opacity) |
$checkbox-label-padding | 0 0 0 0.5em |
$checkbox-margin-sibiling | 0.5em |
$checkbox-size | 1rem |
$checkbox-line-height | 1.5 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$checkbox-size | 1.25em |
$checkbox-colors | var.$colors |
$checkbox-background-color | transparent |
$checkbox-border-color | css.getVar("grey") |
$checkbox-border-radius | css.getVar("radius") |
$checkbox-border-width | 2px |
$checkbox-checkmark-color | css.getVar("primary-invert") |
$checkbox-focus-color | hsl(from css.getVar("grey") h s l / 80%) |
$checkbox-active-focus-color | hsl( from css.getVar("checkbox-active-background-color") h s l / 80%) |
$checkbox-active-background-color | css.getVar("primary") |
$checkbox-shadow | css.getVar("shadow") |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
The theme does not have any custom variables for this component.