Selectable Box
Represents a content box to used in a group where one or more can be selected.
import { registerSelectableBox } from '@vonage/vivid';
registerSelectableBox('your-prefix');
Use the --selectable-box-spacing variable to set the amount of spacing applied to the Selectable Box.
Use the --selectable-box-checked-bg variable to override the default background color applied to the checked state of the Selectable Box.
| Property |
Type |
Default |
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 |
Default |
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 |
| Name |
Description |
| default |
Slot for box's content.
|
| Name |
Description |
| default |
Slot for box's content. |
| Event |
Type |
Description |
| change |
CustomEvent<undefined> |
Fired when the checked state changes |
| Name |
Type |
Description |
| change |
CustomEvent<undefined> |
Fired when the checked state changes |
