Checkbox
Checkboxes allow users to select one or more items from a list of options.
Use the label attribute to provide a visible label for the Checkbox.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <VCheckbox label="Use signed Webhooks"></VCheckbox></template><vwc-checkbox label="Use signed Webhooks"></vwc-checkbox>Use the helper-text attribute or slot to provide additional context or instructions for the Checkbox.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <VCheckbox label="Use signed Webhooks" helper-text="Signed Webhooks are a way to verify that the request is coming from Vonage."></VCheckbox></template><vwc-checkbox label="Use signed Webhooks" helper-text="Signed Webhooks are a way to verify that the request is coming from Vonage."></vwc-checkbox>The checked property or current-checked attribute controls the checked state of the Checkbox.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <VCheckbox label="Use signed Webhooks" checked></VCheckbox></template><vwc-checkbox label="Use signed Webhooks" checked></vwc-checkbox>Checkboxes support an indeterminate state, which indicates that the Checkbox is neither checked nor unchecked.
The indeterminate state is mainly used to implement Select all / none functionality.
Use the indeterminate property to set the Checkbox to indeterminate.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <VCheckbox label="Select all" indeterminate></VCheckbox></template><vwc-checkbox label="Select all"></vwc-checkbox>
<script>document.querySelector('vwc-checkbox').indeterminate = true;</script>Toggle the disabled member to disable/enable the Checkbox.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template><VCheckbox disabled></VCheckbox> <VCheckbox disabled checked></VCheckbox></template><vwc-checkbox disabled></vwc-checkbox> <vwc-checkbox disabled checked></vwc-checkbox>Set the readonly member to specify a Checkbox is read-only.
A read-only Checkbox cannot be modified (however it can be focused and tabbed into).
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template><VCheckbox readonly></VCheckbox> <VCheckbox readonly checked></VCheckbox></template><vwc-checkbox readonly></vwc-checkbox> <vwc-checkbox readonly checked></vwc-checkbox>The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <VCheckbox label="I agree to the terms and conditions" error-text="You must agree to the terms and conditions to proceed"></VCheckbox></template><vwc-checkbox label="I agree to the terms and conditions" error-text="You must agree to the terms and conditions to proceed"></vwc-checkbox>The success-text attribute provides a custom success message. Any current error state will be overridden by success-text.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <VCheckbox label="A default checkbox" success-text="Success text" checked></VCheckbox></template><vwc-checkbox label="A default checkbox" success-text="Success text" checked></vwc-checkbox>Use the connotation attribute to set the Checkbox color.
<script setup lang="ts">import { VCheckbox } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VCheckbox connotation="accent"></VCheckbox> <VCheckbox connotation="accent" checked></VCheckbox> <VCheckbox connotation="cta"></VCheckbox> <VCheckbox connotation="cta" checked></VCheckbox> </div></template>
<style scoped>.container { display: flex; gap: 2px;}</style><vwc-checkbox connotation="accent"></vwc-checkbox><vwc-checkbox connotation="accent" checked></vwc-checkbox><vwc-checkbox connotation="cta"></vwc-checkbox><vwc-checkbox connotation="cta" checked></vwc-checkbox>