How to get a "tag box"?

Anvil Q&A
1

Hi, how would I get a “tag box” like this in Anvil?
Screenshot_2022-01-08_15-43-26

I just want a box with “tags” a user can add by typing a word in with a ,, and remove by pressing an X. I looked in the components section, but didn’t find one.

2

You could have a look at the chips component in the Anvil Extras library.

5 Likes
3

There’s also the token box component in this: Token Box and Multi Select DropDown

3 Likes
4

Hi, I’ve previously built something similar with plain old Anvil Links. Just add a “times” icon to the links and give them a role (CSS class) with a background-color and a border with a little border-radius.

This is an example from a (live) literature periodical I’ve written:

link-badges
link-badges1807×368 14.6 KB

The role could be written something like this (you might also want to add some additional styling to the link text and the icon - and of course add :hover-styling - either in the role or in CSS for a tags):

/* badge (Link) */

.anvil-role-badge {
  color: DarkBlue;
  background-color: LightSkyBlue;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
}
1 Like