Checkbox

<script setup lang="ts">
import { VCheckbox } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCheckbox label="Use signed Webhooks" />
</template>

<script type="module">
  import { registerCheckbox } from '@vonage/vivid-api';
  registerCheckbox('your-prefix');
</script>

<your-prefix-checkbox label="Use signed Webhooks"></your-prefix-checkbox>

<script setup lang="ts">
import { VCheckbox } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="container">
    <VCheckbox aria-checked="true"></VCheckbox>
    <VCheckbox aria-checked="false"></VCheckbox>
    <VCheckbox aria-checked="mixed"></VCheckbox>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  gap: 2px;
}
</style>

<vwc-checkbox aria-checked="true"></vwc-checkbox>
<vwc-checkbox aria-checked="false"></vwc-checkbox>
<vwc-checkbox aria-checked="mixed"></vwc-checkbox>

<script setup lang="ts">
import { VCheckbox } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCheckbox error-text="You need to accept the Terms of service">
    I agree to
    <a href="https://www.vonage.com/legal/" target="_blank"> Vonage Terms of Service </a>
  </VCheckbox>
</template>

<vwc-checkbox error-text="You need to accept the Terms of service">
  I agree to
  <a href="https://www.vonage.com/legal/" target="_blank">
    {' '}
    Vonage Terms of Service{' '}
  </a>
</vwc-checkbox>

<script setup lang="ts">
import { VCheckbox } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCheckbox class="checkbox" label="Use Signed Webhooks">
    <template #helper-text>
      <span><a href="#">Signed Webhooks</a> are a way to verify that the request is coming from Vonage.</span>
    </template>
  </VCheckbox>
</template>

<style scoped>
.checkbox {
  width: 300px;
}
</style>

<style>
  .checkbox {
    width: 300px;
  }
</style>
<vwc-checkbox class="checkbox" label="Use Signed Webhooks">
  <span slot="helper-text"><a href="#">Signed Webhooks</a> are a way to verify that the request is coming from Vonage.</span>
</vwc-checkbox>