The Tag Input component allows a user to select a list of tags. The options can be shown either in a dropdown or in a table. A search field allows the user to filter the options and, if allowed, to create new tags (dropdown variant only).
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.
Options are specified with the
* Required property
label-positionis set to none (for screen reader users).
max-tagsis set, it replaces the message under the input ("Tags added: x/y" and, when applicable, " - No more tags can be added because the limit has been reached."
top | left | none
top. Set to
noneif no label should be displayed. Note:
leftis not supported by the Table variant.
Add a new tag,
Search and select a tag, or
Add or search for a tag.
“tag selection. Press Backspace or Delete to remove a tag”
dropdown | table
50. This limit is enforced by the component, which will display the number of characters and announce the limitation to screen reader users.
trunc(truncate). Defaults to
wrap(so if the property is absent all columns, text will wrap). If provided less values than there are columns, the last columns will wrap (so
truncis equivalent to
trunc, wrap, wrap, wrapif 4 columns have been specified)
Usage in HTML
Edit the code below to see changes reflected in the example above.
Example code for functionality.
Usage in Elm
Code generated from HTML.
wm-tag-optionwhen the user selects an option.
wm-tag-optionwhen the user deselects an option (either clicking on a selected row in the table or removing a tag).
wm-tag-inputwhen the user adds a new option.
ev.detailcontains the string typed by the user.
|Left Arrow Right Arrow||Navigate through the tag list.|
|Backspace Delete||Removes the currently focused tag. Handle the removal with the event
|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 variant: If user has typed and
|Up Arrow Down Arrow||Navigate through the list items.|
|Escape||Stops navigating the dropdown and returns focus to the search field.|
Adds the currently focused option as a new tag. Handle this action by setting the
|Up Arrow Down Arrow||Navigate through the table rows.|
|Left Arrow Right Arrow||Navigate through the row's cells.|
Adds the currently focused row as a new tag. Handle this action by setting the
- Tag Inputs have a
80vh. 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.
- In the dropdown variant, when the user can add tags (
add-new="true"), the component detects duplicate entries in order to properly announce the duplicate entry to screen reader users. It does not emit the