Selectable Box

Represents a content box to used in a group where one or more can be selected.

Usage

import { registerSelectableBox } from '@vonage/vivid-api';

registerSelectableBox('your-prefix');

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

<your-prefix-selectable-box> Selectable Box </your-prefix-selectable-box>

CSS Variables

Spacing

Use the --selectable-box-spacing variable to set the amount of spacing applied to the Selectable Box.

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

<template>
  <VSelectableBox class="box"> Custom spaced box (8px) </VSelectableBox>
</template>

<style>
.box {
  --selectable-box-spacing: 8px;
  max-inline-size: 450px;
}
</style>

Checked Background Color

Use the --selectable-box-checked-bg variable to override the default background color applied to the checked state of the Selectable Box.

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

<template>
  <VSelectableBox checked class="box">
    Selected background is now white
  </VSelectableBox>
</template>

<style>
.box {
  --selectable-box-checked-bg: #ffffff;
  max-inline-size: 450px;
}
</style>

API Reference

Properties

Property	Type	Description
checked	`boolean`	Controls the checked state
clickableBox	`boolean`	Sets the whole box to be clickable
connotation	`'accent' \| 'cta'`	Controls the color of the box and its control
controlPlacement	`'end' \| 'start' \| 'start-stacked' \| 'end-stacked'`	Controls where the control should be placed in the box
controlType	`'checkbox' \| 'radio'`	Controls the type of control in the box
disabled	`boolean`	Controls the disabled state of the box and its control
tight	`boolean`	Removes the padding from the boxes content area

Property	Type	Description
checked	`boolean`	Controls the checked state
clickable-box	`boolean`	Sets the whole box to be clickable
connotation	`'accent' \| 'cta'`	Controls the color of the box and its control
control-placement	`'end' \| 'start' \| 'start-stacked' \| 'end-stacked'`	Controls where the control should be placed in the box
control-type	`'checkbox' \| 'radio'`	Controls the type of control in the box
disabled	`boolean`	Controls the disabled state of the box and its control
tight	`boolean`	Removes the padding from the boxes content area

Slots

Name	Description
default	Slot for box's content.

Name	Description
default	Slot for box's content.

Events

Name	Type	Description
change	`CustomEvent<undefined>`	Fired when the checked state changes

Name	Type	Description
change	`CustomEvent<undefined>`	Fired when the checked state changes