VChipGroup API

Props

name	type	default
`base-color`	string	undefined
Sets the color of component when not focused. Recommended with `color` or `filter` to properly highlight selected items.
`center-active`	boolean	false
Forces the selected chip to be centered.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`column`	boolean	false
Remove horizontal pagination and wrap items as needed.
`content-class`	any	undefined
Adds classes to the slide group item.
`direction`	'vertical' \| 'horizontal'	'horizontal'
Switch between horizontal and vertical modes.
`disabled`	boolean	false
Puts all children components into a disabled state.
`filter`	boolean	false
Applies an checkmark icon in front of every chip for using it like a filter.
`mandatory`	boolean \| 'force'	false
Forces at least one item to always be selected (if available).
`max`	number	undefined
Sets a maximum number of selections that can be made.
`mobile`	boolean	null
Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Sets the designated mobile breakpoint for the component.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Allows one to select multiple items.
`next-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$next'
Specify the icon to use for the next icon.
`prev-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$prev'
Specify the icon to use for the prev icon.
`scroll-to-active` New in v3.10.6	boolean	false
Keeps the last active element visible when resizing the scrollable container.
`selected-class`	string	'v-chip--selected'
Configure the active CSS class applied when an item is selected.
`show-arrows`	string \| boolean	false
Force the display of the pagination arrows.
`symbol`	any	undefined
The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`value-comparator`	(a: any, b: any) => boolean	undefined
Apply a custom comparison algorithm to compare model-value and values contains in the items prop.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'tonal'
Applies a distinct style to the component.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  isSelected: (id: string) => boolean
  select: (id: string, value: boolean) => void
  next: () => void
  prev: () => void
  selected: string[]
}

`default`
The default Vue slot.

SASS Variables

name	default
`$chip-group-margin`	4px 8px 4px 0
`$chip-group-padding`	4px 0
`$chip-group-selected-opacity`	var(--v-activated-opacity)

#VChipGroup API

VChipGroup API