Tag Input
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
string
label-position
is set to none (for accessibility reasons).
boolean
true
.
number
50
.
string
top | left | none
top
. Set to none
if no label should be displayed.
number
string: csv
string
Add a new tag
, Search and select a tag
, or Add or search for a tag
string: csv
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
Keyboard Support
Tag Area
Key | Function |
---|---|
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. |
Input Area
Key | Function |
---|---|
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. |
Dropdown
Key | Function |
---|---|
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.
- If a user-added tag is removed, it's corresponding list item will be removed as well.