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.
* Required property
label-positionis set to none (for accessibility reasons).
top | left | none
top. Set to
noneif no label should be displayed.
Add a new tag,
Search and select a tag, or
Add or search for a tag
dropdown | table
selected-tagsto preselect rows.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
event.detailis an object containing two keys:
valueis all the currently selected tags, and
tagChangedis the tag which triggered the event. For the
dropdown variant, tags are represented by their exact string. For the
tablevariant, tags are represented a reference to the corresponding
|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.|
|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.|
|Up Arrow Down Arrow||Navigate through the list items.|
|Escape||Stops navigating the dropdown and returns focus to the search field.|
|Up Arrow Down Arrow||Navigate through the table rows.|
|Left Arrow Right Arrow||Navigate through the row's cells.|
- 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 list items are sorted alphabetically.
- If a user-added tag is removed, its corresponding list item will be removed as well.