Forms
Tag input
Type a word and press Enter to turn it into a tag. The value is a comma-separated list in a normal field.
With suggestions
Enter or comma adds a tag. Up to 5.
HTML
<label class="pw-label" for="demo-tags">Topics</label>
<input id="demo-tags" name="topics" value="design,research" data-pw-tags data-max="5"
data-suggest="design,research,writing,frontend,backend,marketing,sales,support" data-placeholder="Add a topic">
<p class="pw-hint">Enter or comma adds a tag. Up to 5.</p>
<p class="demo-out" id="demo-tags-out"></p>JavaScript
document.getElementById('demo-tags').addEventListener('pw:change', function (e) {
document.getElementById('demo-tags-out').textContent = 'Value: ' + e.detail.values.join(',');
});With a rule
data-pattern is a regular expression each tag must match. Here: something that looks like an email address.
HTML
<label class="pw-label" for="demo-emails">Send to</label>
<input id="demo-emails" name="to" data-pw-tags data-pattern="^[^@\s]+@[^@\s]+\.[a-z]{2,}$" data-placeholder="name@example.com">Options
Set them as attributes on the element.
| Attribute | Default | What it does |
|---|---|---|
data-max | Most tags. | |
data-suggest | A comma-separated list of suggestions. | |
data-pattern | A regular expression each tag must match. | |
data-placeholder | Text in the empty field. |
Events
Listen with addEventListener. Details are in event.detail.
| Event | When |
|---|---|
pw:change | With values, a list. |
change | The normal event of the field. |
pw:invalid | A tag did not match the pattern. |
From your script
var t = Partwise.get('#demo-tags', 'tags');
t.values; // ['design', 'research']
t.add('writing'); t.remove('design'); t.clear();Keyboard
| Key | Action |
|---|---|
| Enter , | Add the typed text as a tag |
| Backspace | In the empty field: remove the last tag |
| Left Right | Move between tags |
| Delete | On a tag: remove it |
| Down Up | Through the suggestions |
Good to know
- Pasting a list with commas or line breaks adds every part.
- The same tag cannot be added twice (capital letters do not matter).
- Adding and removing is announced to screen readers.
- A tag cannot contain a comma, because the comma separates the values.
Files
Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/23-inputs.css, js/23-inputs.js, css/01-basics.css (chips).