The Tag Input allows a user to select a list of tags. Options can be specified by the developer or, if allowed, created by the user.
The component consists of a tag area, an input area, and a dropdown list. The tag area displays all currently selected tags and allows the user to remove tags. The input area allows users to filter the displayed options or create new tags. The dropdown displays help text and all selectable options.
* 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
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
|Left ArrowRight Arrow||Navigate through the tag list.|
|BackspaceDelete||Remove the currently focused tag. If this tag was added by the user, removes the corresponding list item from the dropdown.|
|Down ArrowUp 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 input field.|
|Escape||If the dropdown is open, closes it.|
|Up ArrowDown Arrow||Navigate through the list items.|
|Escape||Stops navigating the dropdown and returns focus to the input area.|
- The component consists of two tab stops, the tag area and the input area. If no tags are selected only the input area will be present.
- Duplicate tags cannot be added.
- List items are sorted alphabetically.
- All list items and tags appear in title case.
- If a user-added tag is removed, it's corresponding list item will be removed as well.