# vwc-button-toggle-group


# Usage


```
<vwc-button-toggle-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-button-toggle-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”||
|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)