# @vonage/vwc-toggle-buttons-group

> toggle-buttons-group component

Latest version **2.10.0** (published 2021-06-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @vonage/vwc-toggle-buttons-group
pnpm add @vonage/vwc-toggle-buttons-group
yarn add @vonage/vwc-toggle-buttons-group
bun add @vonage/vwc-toggle-buttons-group
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.10.0 |
| Published | 2021-06-04 |
| First published | 2021-05-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 47.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Maintainers | tweinfeld, web-il, iceberg-team, yinon, unified_portal, vreporter-npm, vbcbe, voxip_team, gunifydevops, yuri.guller, idanvon, nexmo-devrel, vvd, vonagemeetings |

## Links

- npm: https://www.npmjs.com/package/@vonage/vwc-toggle-buttons-group
- Repository: https://github.com/vonage/vivid
- Homepage: https://github.com/Vonage/vivid/tree/master/components/toggle-buttons-group#readme
- Issues: https://github.com/Vonage/vivid/issues
- npm.io page: https://npm.io/package/@vonage/vwc-toggle-buttons-group

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.0.3
- [lit-element](https://npm.io/package/lit-element.md) ^2.4.0
- [@vonage/vvd-foundation](https://npm.io/package/@vonage/vvd-foundation.md) 2.10.0

## Recent versions

- 2.10.0 (latest) — 2021-06-04
- 2.9.1 — 2021-05-27
- 2.9.0 — 2021-05-24
- 2.8.0 — 2021-05-20
- 2.7.0 — 2021-05-17
- 2.6.2 — 2021-05-05
- 2.6.1 — 2021-05-04
- 2.6.0 — 2021-05-03

## README

# vwc-toggle-buttons-group


# Usage


```
<vwc-toggle-button-group>
  <vwc-button value="11">BUTTON</vwc-button>
  <vwc-button value="12">BUTTON</vwc-button>
  <vwc-icon-button icon="home" value="22">BUTTON</vwc-button>
  <vwc-button value="13">BUTTON</vwc-button>
</vwc-toggle-buttons-group>
```



# Template


```
<slot></slot>
```



# API


## Properties/Attributes

|name|attr/prop/reflected|type|description|
|--- |--- |--- |--- |
|multi|reflected|boolean|allows for multiple selections|
|selected (readonly)|property|[]HTMLElement|list of selected items|
|values|property|[]string|The values of the selected items. Setting this property sets the state according to the items with the values in the array|
|items|property|Element[]|A list of valid toggle elements|
|shape|reflected|“pill”/”rounded”||
|accent|reflected|boolean||
|dense|reflected|boolean|Set the size of the buttons as dense|
|enlarged|reflected|boolean|Set the size of the buttons as enlarged|
|required|reflected|boolean|Prevents toggling off the last selection. Also does not send event of non toggled selection.|



## Events


|name|event.detail|description|
|--- |--- |--- |
|selected||Fires when a button is toggled|



# Notes for consumers:



*   No errors are thrown for misuse
	*   Setting a button without a `value` will return a null value if selected.
	*   Adding invalid button elements (supported list is in the code right now) will not be shown or handled as buttons
*   Handling `selected` events:
	*   When handling a `selected` event one would probably like to query the element.values or element.selected to get the current state after the change
*   One can add more buttons dynamically
	*   If you remove an item and not destroy it, remember that there’s a listener on this item
*   Selected items have the `selected`
*   In order to enforce styles, the following attributes are automatically altered:
	*   `layout` - will be set `layout="filled"` on load (note that changing this after initial load will change the way it looks)

---
_Source: https://npm.io/package/@vonage/vwc-toggle-buttons-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._