Multi-line tags input control
Bulma extension based on span[contenteditable]
and styles of
field
and
input
.
<div class="tagsfield field input is-grouped is-grouped-multiline">
<div>
<input type="hidden">
<span placeholder="Type some tags here" contenteditable></span>
</div>
</div>You can add label and help text. Placeholder is visible only when no
tags input.
Space-separated, minimum one
<label class="label" for="user_skills">Skills</label>
<div class="tagsfield field input is-grouped is-grouped-multiline">
<div>
<input id="user_skills" name="user[skills]" type="hidden" value="JavaScript,HTML5,CSS3">
<span autocomplete="off" spellcheck="false" placeholder="Your skills" contenteditable></span>
</div>
</div>
<p class="help">
Space-separated, minimum one
</p>Show an error with is-danger class:
At least one keyword is required
<label class="label" for="keywords">Keywords</label>
<div class="tagsfield field input is-grouped is-grouped-multiline is-danger">
<div>
<input id="keywords" type="hidden">
<span placeholder="Type some keywords here" contenteditable></span>
</div>
</div>
<p class="help is-danger">
At least one keyword is required
</p>