Tag Input
The Tag Input component allows a user to select a list of tags. Options can be specified by the developer or, if allowed, created by the user (dropdown variant only).
The component consists of an input area consisting of a tag area and a search field and, depending on the variant, a dropdown list or a table underneath the input. The tag area displays all currently selected tags and allows the user to remove tags. The search field allows users to filter the displayed options and eventually to create new tags.
In the dropdown variant the dropdown displays help text and all selectable options. The table variant allows to display more data, for instance people's names, email and role. The table variant's input field should always remain in view when interacting with the component, see the Notes tab for more information.
* Required property
string
label-position
is set to none (for accessibility reasons).
string
required-field
error "Please select at least one tag"
string
top | left | none
top
. Set to none
if no label should be displayed. Note: left
is not supported by the Table variant.
number
string: json
string
Add a new tag
, Search and select a tag
, or Add or search for a tag
boolean
label
property.
string: csv
<wm-tag-input-table-row>
dropdown | table
dropdown
.
Dropdown variant
boolean
true
.
number
50
.
string: csv
Table variant
string: csv
string: csv
string: csv
For wm-tag-input-table-row
string
wm-tag-input
's selected-tags
to preselect rows.
string
boolean
Properties of the object passed to message-config
string
“Press the Enter or Comma key to add a new tag”
string
“No more tags can be added because the limit has been reached”
string
"Search and select a tag."
string
“tag selection. Press Backspace or Delete to remove a tag”
string
“Tags added”
Usage in HTML
Edit the code below to see changes reflected in the example above.
Javascript Sample
Example code for functionality.
Usage in Elm
Code generated from HTML.
event.detail
is an object containing two keys: value
is all the currently selected tags, and tagChanged
is the tag which triggered the event.
For the dropdown variant
, tags are represented by their exact string. For the table
variant, tags are represented a reference to the corresponding wm-tag-input-row
.
Keyboard Support
Tag Area
Key | Function |
---|---|
Left Arrow Right Arrow | Navigate through the tag list. |
Backspace Delete | Remove the currently focused tag. If this tag was added by the user, removes the corresponding list item from the dropdown. |
Search Field
Key | Function |
---|---|
Down Arrow Up Arrow | If the dropdown is closed, re-opens it. If the dropdown is open, begin navigating the dropdown. If the first list item is reached, Up will focus the search field. |
Escape | If the dropdown is open, closes it. |
Dropdown
Key | Function |
---|---|
Up Arrow Down Arrow | Navigate through the list items. |
Escape | Stops navigating the dropdown and returns focus to the search field. |
Table
Key | Function |
---|---|
Up Arrow Down Arrow | Navigate through the table rows. |
Left Arrow Right Arrow | Navigate through the row's cells. |
- Tag Inputs have a
max-height
of80vh
. This ensures that in the Table variant, where the content might exceed the height of the screen, the table itself scrolls rather than the whole component. The input field should always remain in view while the user is interacting with the component. If different height requirements are needed, the max-height value can be overwritten or the Tag Input can be given with a fixed height. See the Example tab for an illustration. - The component consists of two tab stops, the tag area and the search field. If no tags are selected only the search field will be present.
- Duplicate tags cannot be added when using the dropdown variant.
- The dropdown options are sorted alphabetically.
- If a user-added tag is removed, its corresponding dropdown option will be removed as well.