DisplayChipGroup

A group of chips that share a selection, one or several.

import { DisplayChipGroup } from '@zairakai/vue-components/Display'

Usage

<DisplayChipGroup />

Example

Selected: vue

<script setup>
  import { ref } from 'vue'

  const selected = ref(['vue'])
</script>

<template>
  <DisplayChipGroup
    v-model="selected"
    label="Frameworks"
  >
    <DisplayChip value="vue">Vue</DisplayChip>
    <DisplayChip value="svelte">Svelte</DisplayChip>
    <DisplayChip value="solid">Solid</DisplayChip>
  </DisplayChipGroup>
  <p>Selected: {{ selected.join(', ') || 'none' }}</p>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	array	undefined	The values of the chips that are chosen.
multiple	boolean	true	One chip at a time, or several.
label	string

Events

Name	Description
update:modelValue

Slots

Name	Description
default

See Theming for the class hooks and the data-* state of the components.