OrugaCheckbox
Select a single or grouped options
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 |
Checkbox component
html
<o-checkbox></o-checkbox>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 |
| label | Input label, unnecessary when default slot is used | string | - | undefined |
| name | Same as native name | string | - | |
| nativeValue | Same as native value | string|number|boolean|array | - | |
| override | boolean | - | ||
| 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 |
|---|---|---|
| update:modelValue | ||
| input |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $checkbox-active-background-color | $primary |
| $checkbox-background-color | $primary |
| $checkbox-border-color | $primary |
| $checkbox-border-radius | $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 | $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 ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $checkbox-active-background-color | $primary |
| $checkbox-background-color | $primary |
| $checkbox-border-color | $primary |
| $checkbox-border-radius | $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 | $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
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
The theme does not have any custom variables for this component.