# Uses
||UsersMultiselectWidget|APISandbox|CategorySelector|MWCategoryWidget|Category lists|Active filter area|
|--|--|--|--|--|--|--|
|Project|#mediawiki-extensions-newsletter | #mediawiki-extensions-apisandbox |#uploadwizard |#visualeditor |#contenttranslation |#edit-review-improvements-rc-page |
|Details|T131492| |T111791|T41597|T134740|T149391|
|Screenshot|{F5291576,size=full}{F5241851,size=full}|{F6517114,size=full}|{F6517509,size=full}|{F4582298,size=full}|{F5427685,size=full}|{F4688110,size=full}|
|Add|{icon check color=green}|{icon check color=green}|{icon check color=green}|{icon check color=green}|{icon check color=green}|{icon check color=green}|
|Edit|{icon check color=green}|{icon check color=green}|{icon check color=green}|{icon times color=red} (not directly from the widget, need to open the dropdown T67518)|{icon check color=green}|{icon times color=red}|
|Remove|{icon check color=green}|{icon check color=green}|{icon check color=green}|{icon times color=red} (not directly from the widget, need to open the dropdown)|{icon check color=green}|{icon check color=green}|
|Remove all|{icon times color=red}|{icon times color=red}|{icon times color=red}|{icon times color=red}|{icon times color=red}|{icon check color=green}|
|Click for more|{icon times color=red}|{icon times color=red}|{icon check color=green} (opens the category page)|{icon check color=green}(opens a dropdown with options)|{icon times color=red}|{icon times color=red}|
|Re-order|{icon times color=red}|{icon times color=red}|{icon times color=red} T108490|{icon check color=green}|{icon times color=red}|{icon times color=red}|
|Separate input widget|{icon times color=red}|{icon times color=red}|{icon times color=red}|{icon check color=green}|{icon times color=red}|{icon check color=green}|
# Issues
[x] The circled X to remove the tag is too prominent. The main purpose of the tag is to communicate its content, removing it should be a discoverable action but not the main focus of attention. Using a regular "x" would reduce the visual weight, making it less prominent and more consistent with other components. – Fixed in v0.19.5
[x] The vertical space for the tags and the container make the components feel a bit cluttered by so many lines together with not much space around them.While keeping the components compact, they can benefit from some extra space. – Got increased to standard widget `32px` height.
[] The overhauled tag component is so much bigger that, when part of an input field, it heightens the field to 40+px. All other input field/dropdown components (only exception SelectFieldWidget with drop area) are at 32px height. See M101
[] Tags are still hard to differentiate from buttons. How different a tag should be from a button? A button is a rectangle with a label, a dropdown is a rectangle with a label + a triangle/chevron, a tag is a rectangle with a label and an "X". Which is the problem? Which is the expected confusion for the user?
[] Tags also come in slightly different flavors/contexts: Within input field as in CapsuleMultiselectWidget, as standalones in the filter search bar, possible future usage, that isn't in place yet?
[] The whole editing pattern is not clearly at stake now, but seems like a major pain: No in-place editing of tags, but changing order on clicking the tag. RCFilters once again has a different take there.
# Proposals
### Based on RC {T149391}
{F5667703,size=full}
It uses the standard close icon, and uses 5px space consistently inside the tag and 10px outside of it.
### Sizes and placement of tags
{F6563000, size=full}