oa/documentation/checkbox/checkbox-solid-documentation.md

state

state
options false

Complex object value

You can use complex object values to store the state of the checkbox by using the trueValue and falseValue props.

Note that alternative checkbox style with solid attribute. Those checkboxes also support all main colors. The available modifiers are primary, success, info, warning, danger.

<script setup lang="ts">
const options = ref(false)
</script>

<template>
  <VField class="is-flex">
    <VControl raw subcontrol>
      <VCheckbox
        v-model="options"
        :true-value="{ name: 'option1', label: 'Option 1' }"
        label="Option 1"
        solid
      />
    </VControl>
    <VControl raw subcontrol>
      <VCheckbox
        v-model="options"
        :true-value="{ name: 'option2', label: 'Option 2' }"
        label="Option 2"
        color="primary"
        solid
      />
    </VControl>
    <VControl raw subcontrol>
      <VCheckbox
        v-model="options"
        :true-value="{ name: 'option3', label: 'Option 3' }"
        label="Option 3"
        color="info"
        solid
      />
    </VControl>
    <VControl raw subcontrol>
      <VCheckbox
        v-model="options"
        :true-value="{ name: 'option4', label: 'Option 4' }"
        label="Option 4"
        color="success"
        solid
      />
    </VControl>
    <VControl raw subcontrol>
      <VCheckbox
        v-model="options"
        :true-value="{ name: 'option5', label: 'Option 5' }"
        label="Option 5"
        color="warning"
        solid
      />
    </VControl>
    <VControl raw subcontrol>
      <VCheckbox
        v-model="options"
        :true-value="{ name: 'option6', label: 'Option 6' }"
        label="Option 6"
        color="danger"
        solid
      />
    </VControl>
  </VField>
</template>