Vue Chip Input Component API

Sets the wording announced when chips are added: a word that follows their values, joined with commas, or a function that receives the values and returns the whole message.

Sets the wording announced when chips are removed: a word that follows their values, joined with commas, or a function that receives the values and returns the whole message.

Names each chip's remove button with the chip's value: a string has {label} replaced by it, or gets it appended when there is no {label} (Remove Vue); a function receives the value and returns the whole name.

Adds custom classes to chips rendered by the component. Accepts a static className or a resolver function based on chip value.

Creates a new chip when the component loses focus with a pending value.

Toggle the disabled state for the component.

Feedback for the current validationState — rendered only while the state is set, and styled after it. For the client-side mode, where the browser owns the state, use feedbackValid and feedbackInvalid instead.

Feedback the stylesheet reveals while the control is invalid — always rendered, so it works with client-side validation, where the browser decides the state.

Feedback the stylesheet reveals while the control is valid — always rendered, so it works with client-side validation, where the browser decides the state.

Renders the chips as filter chips, each showing a leading check icon while selected. Implies selectable.

Sets the id of the internal text input rendered by the component.

Renders an inline label inside the component container.

Sets the maximum number of chips that can be created in the component.

The default name for a value passed using v-model.

Name of the hidden field the chips are submitted under, separated by commas. Without it the chips are not submitted with the form.

Sets placeholder text for the internal input of the component.

Toggle the readonly state for the component.

Displays remove buttons on chips managed by the component.

Makes the hidden field that carries the chips required, so an empty component blocks the submit, and marks the text input aria-required.

Enables chip selection behavior in the component.

Sets how many chips can be selected at once.

Sets the separator character used to create chips while typing or pasting in the component.

Size the component small or large.

Display validation feedback in a styled tooltip.

The validation state, rendered as the is-{state} class on the frame; 'invalid' also sets aria-invalid on the text input and blocks the submit. Any custom state declared in the $form-validation-states Sass map is accepted. The user's next change of the chips emits update:validationState with undefined.

Event occurs when the component adds a new chip.

Event occurs when the value list changes.

Event occurs when the internal text input value changes.

Event occurs when the component removes a chip.

Event occurs when the selected chip values change.

Emit the new value whenever there's a change.

Event occurs with undefined when the user adds or removes a chip, or the form is reset, while validationState is set. A given state is a verdict on the chips it was given for; bind it with v-model:validation-state to drop it and let the browser's own validation show again.