Chip Field

BsChipField is a component that let users enter arbitrary items, like categories or tags into an UI to convey a small pieces of information.

Overview

BsChipField uses BsChip internally and mimics like HTML5 <input type="text"> element with tagging functionality. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property.

Field Label

State Readonly

Sandra

Adams

State Disabled

Sandra

Adams

IMPORTANT

Do not use the model-value property when using v-model.

Style Variants

You can style <bs-chip-field> to your own preference or use a style variant based on Google Material Design 2 or Material Design 3 specifications.

Default

You can style <bs-chip-field> that follows Google Material Design 2 specifications by using floating-label property explicitly.

Classic Field

Field Label

Floating Label

Filled

Use filled property explicitly to enable <bs-chip-field> with solid fill style. And when combined with floating-label property, <bs-chip-field> will have a style that follows the Google Material Design 3 specifications.

Classic Field

---

Field Label

Floating Label

Outlined

Use outlined property explicitly to enable <bs-chip-field> with outline style. And when combined with floating-label property, <bs-chip-field> will have a style that follows the Google Material Design 3 specifications.

Classic Field

---

Field Label

Floating Label

Chip Styles

The chip items can also be styled. The guide below shows you how to style the chip items.

Chips Color

The chip's color can be set using the chip-color property. Any color variant from MDBootstrap colors and Material colors can be applied to the <bs-chip-field>.

Field Label

Outlined Chips

Use chip-outlined property explicitly to create chip items with outlined shape style.

Field Label

Rounded Pill Chips

Use chip-pill property explicitly to create chip items with rounded-pill shape style.

Field Label

Outlined Rounded Pill Chips

Use both chip-outlined and chip-pill property explicitly to create chip items with outlined rounded-pill shape style.

Field Label

Clearable

Define the clear-button property explicitly, so that the field value can be cleared easily.

Field Label

Deletable Chip

Define the chip-deletable property explicitly, so that existing chip items can be easily deleted.

Field Label

Real value: []

Help Text

The help-text property on <bs-chip-field> adds an help text beneath the Field. And sets the persistent-help-text property to false will make the help text visible only when the Field is focused.

Product Tags

Website keywords

Enter website keywords

Product Tags

Website keywords

Enter website keywords

Product Tags

Website keywords

Enter website keywords

Icons

The properties prepend-icon, prepend-icon-outer, append-icon and append-icon-outer provides the ability to add icon to <bs-chip-field>.

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 _filled and _outlined_filled will display the same icon style variant.

Updated on v2.1.0

Prepend

Append

Prepend Outer

Append Outer

Prepend

Append

Prepend Outer

Append Outer

Prepend

Append

Prepend Outer

Append Outer

INFO

Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

CSS Variables

Added since v2.0.0

--md-field-active-border-color: rgb(var(--md-field-active-indicator));
--md-field-active-border-width: 2px;
--md-field-color-bg: currentColor;
--md-field-border-color: currentColor;
--md-field-border-width: 1px;
--md-field-floating-label-color: var(--md-field-label-color);
--md-field-label-color: currentColor;

// global css variables
--md-field-primary-indicator-rgb: 98, 0, 238;
--md-field-primary-indicator: rgb(var(--md-field-primary-indicator-rgb));
--md-field-accent-indicator-rgb: 185,156,225;
--md-field-accent-indicator: rgb(var(--md-field-accent-indicator-rgb));
--md-field-active-indicator: var(--md-field-primary-indicator-rgb);

API Reference

Property	Type	Default	Description
action-icon-variant	String	'outlined'	Sets the action icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. Updated on v2.1.0
append-icon	String		Sets icon to display at the inner right side. Updated on v2.1.0 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.
append-icon-outer	String		Sets icon to display at the outer right side. Updated on v2.1.0 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.
autocomplete	Boolean/String	false	Sets browsers autocomplete predictions on/off.
autofocus	Boolean	false	Autofocus field when this component is mounted.
clear-button	Boolean	false	Sets auto show the clear button.
chip-color	String	'light-grey'	The default chips color to apply.
chip-deletable	Boolean	false	Display the close button on each chip items to delete a chip.
chip-outlined	Boolean	false	Create chip items with outline shape style.
chip-pill	Boolean	false	Create chip items with rounded-pill shape style.
disabled	Boolean	false	Enable/disable the component and the <input> element.
external-validator deprecated	TValidator		Use validator instead.
filled	Boolean	false	Create the component with solid fill style appearance. See Google Material Design for details.
floating-label	Boolean	false	Create the component with floating field label. See Google Material Design for details.
help-text	String		The help text to display below the field component.
id	String		Sets <input> element ID attribute. This property value is auto generates.
model-value v-model	String/String[]		Monitored by v-model to maintain this field value. v2.0.0
name	String		Sets <input> element name attribute.
outlined	Boolean	false	Create the component with outline style appearance. See Google Material Design spec.
persistent-help-text	Boolean	true	Keeps help text visible when the component is not focused.
placeholder	String		Sets the field placeholder.
prepend-icon	String		Sets icon to display at the inner left side. Updated on v2.1.0 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.
prepend-icon-outer	String		Sets icon to display at the outer left side. Updated on v2.1.0 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.
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets <input> element required attribute.
validation-icon	Boolean	false	Display validation icon or not, when this field has been validated. v2.0.0
validator	TValidator		The configuration options to integrate external validator plugin to validate this field value. v2.0.0

Name	Arguments	Description
blur	( evt:FocusEvent)	Triggers when this ChipField lost focus.
clear		Triggers after this field value is cleared.
delete-item	( item:String)	Triggers when a chip is deleted from this ChipField. v2.0.0
focus	( evt:FocusEvent)	Triggers when this ChipField got focused.
keydown	( evt:KeyboardEvent)	Triggers when cursor is still in the <input> element and keyboard key is pressed.
update:model-value	( value:String/String[])	Triggers when this ChipField's model-value property is updated. v2.0.0

Name	Description
default	The outlet slot used to place the field label.
append-inner	The outlet slot used to place custom icon or component at the inner right side. v2.0.0
append-outer	The outlet slot used to place custom icon or component at the outer right side. v2.0.0
help-text	The outlet slot used for custom help text. v2.0.0
prepend-inner	The outlet slot used to place custom icon or component at the inner left side. v2.0.0
prepend-outer	The outlet slot used to place custom icon or component at the outer left side. v2.0.0

TValidator

The validator configuration option has properties as described below:

Property	Type	Description
validators	Record<String,Boolean>	External validator plugin validation result.
messages	Record<String,String>	Validation message for each validation types.
hasError	Boolean	An indicator that tells the field value pass the validation or not.
dirty	Boolean	Value comes from validator plugin that indicate the field is dirty or not.

All properties are mandatory.

NOTE

Vue MDBootstrap does not include form validation by default, we leave that up to the 3rd party form validation plugin. As of now, Vuelidate has been fully tested with our component library.