Choices Input
Huro is integrated with ChoicesJs, a performant vanilla javascript tags input library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with an input element.
//JS CODE
var textRemove = new Choices(document.getElementById('choices-text-remove-button'), {
delimiter: ',',
editItems: true,
//maxItemCount: 5,
removeItemButton: true,
});
//MARKUP
<div class="field">
<div class="control">
<input id="choices-text-remove-button" class="input"
value="Software, Sass, Engineering" placeholder="Enter something">
</div>
</div>
Choices Select
Huro is integrated with ChoicesJs, a performant vanilla javascript tags input library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with a select element.
//JS CODE
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
removeItemButton: true,
});
//MARKUP
<div class="field">
<label>Add some heroes</label>
<div class="control">
<select class="form-control" name="choices-multiple-remove-button"
id="choices-multiple-remove-button" placeholder="This is a placeholder"
multiple>
<option value="superman" selected>Superman</option>
<option value="batman">Batman</option>
<option value="galactus">Galactus</option>
<option value="spawn">Spawn</option>
</select>
</div>
</div>