Chip Group

BsChipGroup extends the BsChip component by providing groupable functionality. It is used for creating groups of selections using chips.

Updated in v2.2.0

Overview

<bs-chip-group> is a collection of <bs-chip>. Rather than create multiple <bs-chip>, it’s better to create single <bs-chip-group>. <bs-chip-group> provides select functionality, which will come in handy when working with more chips. The items property is used as data source to create the chips.

Arts

Creative Writers

Drawers

Foods

Multi Rows

If the total width of chip items exceeds the container's width, use column property to wrap chip items.

Arts

Creative Writers

Drawers

Foods

Home

Shopping

Tech

Vacation

Work

Multiple Selection

By default <bs-chip-group> works in single selection mode. Use multiple property to enable multiple selection mode.

Arts

Creative Writers

Drawers

Foods

Home

Shopping

Tech

Vacation

Work

Filter Chips

Filter chips use tags or descriptive words to filter content. It creates an alternative visual style that communicates to the user that the chip is selected. They are a good alternative to toggle buttons or checkboxes. Use checked-icon property to enable this feature. Additionally, you can use active-class property to change the appearance of the selected chips.

Choose amenities

Elevator

Washer / Dryer

Fireplace

Wheelchair access

Dogs ok

Cats ok

---

Choose neighborhoods

Snowy Rock Place

Honey Lane Circle

Donna Drive

Elaine Street

Court Street

Kennedy Park

Enabling Avatar

Additionally, each chips can also has avatar. This can be achieved by providing the imgSrc on the chips data source.

Choose amenities

Elevator

Washer / Dryer

Fireplace

Wheelchair access

Dogs ok

Cats ok

---

Choose neighborhoods

Snowy Rock Place

Honey Lane Circle

Donna Drive

Elaine Street

Court Street

Kennedy Park

Sliding Chips

Sliding Chips is used when the total width of chip items exceed the container's width, but still wants to keep it within a single row. When enabled, it creates a visual style like slide carousel. Left and right arrows button is provided as a navigation functionality. To enable this feature, use the slider-button property explicitly.

Arts

Creative Writers

Drawers

Foods

Home

Shopping

Tech

Vacation

Work

API Reference

Property	Type	Default	Description
active-class	String		Custom css class to apply when the chip's item is in active state. See Color Variants for more information.
close-button-color	String		Apply custom color to the close button. v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger, info. light and dark.
color	String	'secondary'	The component's color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger, info and light.
checked-icon	Boolean	false	Enable filter chip mode and show checked icon on the selected chip.
column	Boolean	false	Enable multi rows if total width of items beyond the container width.
img-circle	Boolean	false	Create chip item's avatar with circle shape.
img-padding-off	Boolean	false	Adjust avatar size to match the component height by eliminating the margin around the avatar. v2.0.4
items	TChipOptionItem[]		The data source to create the collection of <BsChip>.
model-value v-model	TChipValue|TChipValue[]|null		The value monitored by v-model. v2.0.0
multiple	Boolean	false	Allow multiple selection or not.
outlined	Boolean	false	Enable outlined chip style.
pill	Boolean	false	Enable rounded-pill chip style.
size	String		Create chip's item with predefined size. Valid values are: sm (small), lg (large).
slider-button	Boolean	false	Show slider's button or not. v2.0.0
slider-button-color	String	'secondary'	Slider button color appearance. v2.0.0

Name	Arguments	Description
change	(value:TChipValue|TChipValue[]|null)	Triggers immediately when the model-value property is changed.
item:close	(value:TChipOptionItem)	Triggers when the chip's item close (x) button is clicked or chip's item has been dismissed. v2.0.0
update:model-value	(value:TChipValue|TChipValue[]|null)	Triggers when the model-value property is updated. v2.0.0

Name	Description
text	The outlet slot used to place the chip's item text. v2.0.1
icon	The outlet slot used to place custom icon. v2.0.1

TChipOptionItem

The Chip's item has properties as described below:

Property	Type	Description
id	String	<BsChip> element ID.
text required	String	The item text.
value	String|Number|Boolean	The item value.
disabled	Boolean	<BsChip> element state.
dismissible	Boolean	Enable dismissible <BsChip>.
href	String	Render <BsChip> as <a> element and define its href property and apply chip styles to the <a> element.
icon	String	The icon to display inside the <BsChip>. Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix will take precedence over iconVariant property.
iconFlip	String	Flip the icon. Valid values are: horizontal, vertical, both.
iconPulse	Boolean	Apply pulse animation to the icon.
iconSpin	Boolean	Apply spin animation to the icon.
iconRotation	Number	Rotate the icon. Valid values are: 90, 180, 270.
iconVariant	String	Predefined icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. v2.1.0
imgSrc	String	<BsChip> avatar image source url.