CheckButtonGroup

Demos

Available values for the ui prop: s / m.

Name	Type	Default	Description
`ui`	`string=`	-	[^ui]
`items`	`Array<Object>`	`[]`	[^items]
`value`	`Array`	`[]`	[^value]
`disabled`	`boolean=`	`false`	Whether the check button group is disabled.
`readonly`	`boolean=`	`false`	Whether the check button group is read-only.
`empty-value`	`*`	-	The value to be selected when all selected values are deselected. Used when `exclusive` items are present.

^^^ui Style variants.

+++Enum values

Value	Description
`s`	Small.
`m`	Medium.
`simple`	Simple style.
`stable`	Stable width layout. Every button will have a minimal width so that it'll be easier to align buttons across multiple rows.
^^^

^^^items The datasource of items with the item type being {label, value, disabled, exclusive ...}.

+++Properties

Name	Type	Description
`label`	`string`	The descriptive label of the item.
`value`	`*`	The value of the item.
`disabled`	`boolean=`	Whether the item is disabled.
+++
^^^

^^^value :::badges v-model :::

The values of the selected items. ^^^

Name	Description
`item`	[^slot-item]

^^^slot-item The label content of each button. Displays the value of the label property by default.

+++Scope properties

Name	Type	Description
`label`	`string`	The descriptive label of the item.
`value`	`*`	The value of the item.
`index`	`number`	The index of the item within `items`.
`disabled`	`boolean=`	Whether the item is disabled.
+++

Additionally, custom properties apart from the listed ones will also be passes into the scope object via v-bind. ^^^

Name	Description
`change`	[^event-change]

^^^event-change :::badges v-model :::

Triggers when the selected item changed. The callback parameter list is (value: Array) and value is the value array of the selected items. ^^^

Name	Description
`check`	The loading spinner.