Chips

Description

This input combines chip values to the string like first,second,third and put in into hidden input (see code)

Simple input

To create chip input just paste following code as is

<div class="form-group">
    <input class="form-input" type="text" name="users" data-chips>
</div>

Result

Another example with submitting only by Enter

<div class="form-group">
    <input class="form-input" type="text" name="users" data-chips data-chips-comma="false">
</div>

Result

Another example with custom chips & container classes

<div class="form-group">
    <input class="form-input" type="text" name="users" data-chips data-chips-container-classes='["py-5", "px-2", "bg-primary"]'>
</div>

<div class="form-group">
    <input class="form-input" type="text" name="users" data-chips data-chips-classes='["bg-primary"]'>
</div>

Result

Methods

Here you can find a short descriptions for widget methods

Chips.get(querySelector)

Returns a widget instance by query selector

let chip = Spectre.Chips.get('#selector');

chip.log();

instance.add(value)

Adds a new chip value

let chip = Spectre.Chips.get('#selector');

chip.add('new chip value');

instance.delete(value)

Removes a chip by value

let chip = Spectre.Chips.get('#selector');

chip.delete('old chip value');