Checkbox

Select a single or grouped options

---

edit on github

Examples

Base

<template>
  <section>
    <div class="field">
      <o-checkbox>Basic</o-checkbox>
    </div>
    <div class="field">
      <o-checkbox v-model="checkbox">
        {{ checkbox }}
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox v-model="checkboxCustom" true-value="Yes" false-value="No">
        {{ checkboxCustom }}
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox :indeterminate="true">
        Indeterminate
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox disabled>Disabled</o-checkbox>
    </div>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        checkbox: false,
        checkboxCustom: 'Yes'
      }
    }
  }
</script>

Variants

<template>
  <section>
    <div class="field">
      <o-checkbox :value="true">
        Default
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox :value="true" variant="primary">
        Primary
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox :value="true" variant="info">
        Info
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox :value="true" variant="success">
        Success
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox :value="true" variant="danger">
        Danger
      </o-checkbox>
    </div>
    <div class="field">
      <o-checkbox :value="true" variant="warning">
        Warning
      </o-checkbox>
    </div>
  </section>
</template>

<script>
  export default {}
</script>

Array

<template>
  <section>
    <div class="block">
      <o-checkbox v-model="checkboxGroup" native-value="Silver">
        Silver
      </o-checkbox>
      <o-checkbox v-model="checkboxGroup" native-value="Flint">
        Flint
      </o-checkbox>
      <o-checkbox v-model="checkboxGroup" native-value="Vane">
        Vane
      </o-checkbox>
      <o-checkbox v-model="checkboxGroup" native-value="Billy" disabled>
        Billy
      </o-checkbox>
    </div>
    <p class="content">
      <b>Selection:</b>
      {{ checkboxGroup }}
    </p>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        checkboxGroup: ['Flint']
      }
    }
  }
</script>

Class props

📄 Full scss file

Checkbox

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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 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