CheckboxChipGroup

A set of options presented as chips with multiple options to select.

If you need to allow selecting only one option, consider using RadioChipGroup. If you need more customization for the chips, such as their slots, take a look at CheckboxChip, the building block of this component.

Showcase

Source

<script>
  const items = [
    { value: 1, label: 'option 1', checked: true },
    { value: 1.5, label: 'option 1.5', disabled: true },
    { value: 2, label: 'option 2' },
  ];
</script>

<CheckboxChipGroup {items} name="group1" />
<CheckboxChipGroup {items} name="group2" outline />
<CheckboxChipGroup {items} name="group3" small />

Properties #

Any properties of CheckboxChip can be specified – they will be passed down.

Functional Properties

Name	Default	Type	Description
`items` *		`Array`	An array of `{ value, label, disabled, checked }` objects, where only the value is required. Must contain at least one value.
`name` *		`string`	The name of this checkbox group. Check MDN docs for more information.
`max`	`Infinity`	`number`	The maximum number of chips that can be selected.
`maxReachedTooltip`	`Can only select ${max} value${s(max)}.`	`string`	The tooltip to display when the maximum number of checkboxes has been selected.
`...`		`any`	Everything else will be passed to the underlying `CheckboxChip` component.

* Required

Class Properties

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the component.
`checkboxClass`	`null`	`string`	A class string to add to the `CheckboxChip` components inside.
`labelClass`	`null`	`string`	A class string to add to the wrapping `<span>` around the chips' labels. If it's not specified, the `<span>` will not be added.

Events #

Name	Event Detail	Description
`change`	`{ value, checked, nativeEvent }`	Fired on selecting any chip in a group. The `value` contains the value that was passed to the checkbox (won't be stringified), `checked` is the state of the checkbox after the event and `nativeEvent` is the native `change` event of checkboxes.

SCSS Variables #

Name	Description	Default
`$chip-bg` From `CheckboxChip`	The background color of a non-outline chip.	rgba(0, 0, 0, .08)
`$chip-fg` From `CheckboxChip`	The text color of a chip.	#656565
`$chip-radius` From `CheckboxChip`	The curvature radius of a chip.	`1.5625em`
`$font` From `CheckboxChip`	The font of the chip text.	`'Ubuntu'`
`$main` From `CheckboxChip`	The border color of outline chips and the selection color.	#4300B0
`$bold-font-weight` From `CheckboxChip`	The bold font weight of the chips.	`500`