Link to plugin page: https://bubble.io/plugin/tgging-and-mentioning-input-1680481060913x620088412457664500

Demo to preview the plugin:

🔗

Live Demo: https://tagify-demo.bubbleapps.io/

🔗

Bubble Editor: https://bubble.io/page?id=tagify-demo

Introduction

Enhance your app with our dynamic Tag input element. Seamlessly tag other users, hashtags, or other things with a simple touch. Whether you're commenting on a social platform or organizing your content, Tagify empowers you to effortlessly mix text and tags.

Simple to use

Up to 3 Categories/Things

Access every used tag

How to setup

Create few users in the database.

Put element Tagify on the page.

Setup the Tagify:

Lists are the database 'Types' that you want to use for tagging. Choose any database type you have.

Load the data in the 'List Data' field that should be available for tagging. This can be static or changed in the conditions. For example: a static list of users or a list or pages.

Choose the field that should be used for tagging database items. For example: if you want to tag users, you're likely to choose their first name or username. Note: make sure that the field is visible to users by setting the right privacy rules.

Set for each list a unique tag opener. This is the symbol that should be used to create tags. For example: tagging users is often done by using the @ symbol.

Setup the Tagify:

Style each list's tags to your own desire. Tags have a regular 'Hovered' state and a 'Remove hover' state which is active when hovering the 'X-button' in a tag. You're also able to style the dropdown element. The dropdown element itself can be styled as well as the items in the list.

Setup the Tagify:

You can use the 'Initial Content' field to set the content of the Tagify element. If the initial content of the Tagify element is formatted as the below example, Tagify will try to automatically convert everything between [[ & ]] to a tag. This only works if the tag exists in the whitelist, so make sure when the Tagify instance is initialized, that it has tags with the correct value property that match the same values that appear between [[ & ]].

plain text
[[{"text":"Bubble.io","value":"Bubble.io","prefix":"#"}]] is supporting Tags now!

Plugin Element Properties

Title	Description	Type
List	App Type representing any thing from Database.	App type
List Data	A list of Items from database. Type of items equals to field “List”.	List of items representing “List ”
List Field	Select which Field Name should be used to tag data items.	List Field: String
List Opener	Which sign should be used to create tags for List.	String
	List Tags Styling
Text Color	The text color for tags in List.	Color
Background Color	The background color for tags in List.	Color
Border Radius	The border radius for tags in List as text. Ex: '3px'.	String
Hover Background Color	The tag's background color when hovered.	Color
Padding	Vertical Padding and Horizontal Padding. Ex: '2px 4px'.	String
Remove Hover Background Color	Tag's background color when hovering the 'Remove' button.	Color
Remove Icon Color	Remove Button Background Color	Color
Remove Button Background Color	Background color of the 'Remove' button.	Color
Tag Hide Transition Duration	The transition duration for when a tag is removed. Ex: '0.3s'.	String
	Dropdown Styles
Item Background Color	The suggestion's dropdown background color.	Color
Item Hover Font Color	Font color for dropdown item when hovered.	Color
Item Hover Background.	The suggestion's dropdown background color when hovered.	Color
Item Padding	Padding for each dropdown item.	String
Item Border Radius	Border radius for each item in the dropdown.	String
Item Border width	Border width for each item in the dropdown.	String
Dropdown Padding	Vertical Padding and Horizontal Padding. Ex: '2px 4px'.	String
Dropdown Font Size	Size for the dropdown text, may be in px, em, %, etc	String
Dropdown Font Weight	Font weight for dropdown. Ex: '400'.	String
Dropdown Font Color	Font Color for dropdown.	Color
Dropdown Border Radius	Border radius for the entire dropdown element. Ex: '4px'.	String
Dropdown Border Color	Color for the border for the dropdown element.	Color
Item Border Color	Border color for each dropdown item.	Color
Dropdown Separation Width	Separation between dropdown items. Ex: '5px’	String
ㅤ	ㅤ	ㅤ
Initial Content	Initial content for Tagify element. Possible to use dynamic data if you set up List Types correctly and pass Tag Data as [[{"value":"{{value_here}}","prefix":"{{prefix_here}}"}]].	String
Placeholder	Text to show when there is no content.	String
Placeholder Color	Color for the placeholder text.	Color
Disabled	Yes to Disable, No to Enable input.	Boolean (yes/no)
Characters for dropdown	The amount of characters you need to write to deploy dropdown suggestions. Max is 2. Ex: 0 means the dropdown is shown immediately after the opener.	Number
Allow Vertical Scrolling	Yes to allow vertical scrolling when content overflows	Boolean (yes/no)
Enable Debug	Show logs in the dev-tools.	Boolean (yes/no)

Element Actions

Reset - Action to clear the content from the Tagify Input.

Focus - Action to focus on the Tagify Input.

Disable/Enable - Action to Disable/Enable the Tagify Input..

Title	Description	Type
Props	Yes to Disable, No to Enable input.	Boolean (yes/no)

Exposed states

Name	Description	Type
Last Used Tag Text Value	Last used Tag value in plain text.	Text
Tags In Use From 1	List of Tags used from List 1.	Text (list)
Tags In Use From 2	List of Tags used from List 2.	Text (list)
Tags In Use From 3	List of Tags used from List 3.	Text (list)
Content Tags	Tagify's input content with tags markup.	Text
Is Focused	Yes when Tagify input is focused.	Boolean (yes/no)
Content Plain Text	Tagify's input content as plain text.	Text
Last Clicked Tag List 1	Last clicked Tag from List 1.	List type
Last Clicked Tag List 2	Last clicked Tag from List 2.	List type
Last Clicked Tag List 3	Last clicked Tag from List 3.	List type

Element Events

Name	Description
A Tag is Removed	Triggered when the tag is removed.
A Tag From List 1 is Clicked	Triggered when the Tag from list 1 is clicked.
A Tag From List 2 is Clicked	Triggered when the Tag from list 2 is clicked.
A Tag From List 3 is Clicked	Triggered when the Tag from list 3 is clicked.
A Tag is Added	Triggered when the tag is added.

Changelogs

Update: 13.04.23 - Version 0.0.1

private

Update: 13.04.23 - Version 0.0.2

dynamic input

Update: 13.04.23 - Version 0.0.3

Update: 19.05.23 - Version 1.0.0

dynamic list of objects for one list

Update: 19.05.23 - Version 1.1.0

Support 3 lists

Update: 23.05.23 - Version 1.2.0

Independent styles for each list

Update: 24.05.23 - Version 1.2.1

working on plugin element

Update: 24.05.23 - Version 1.2.2

Add bubble properties

Update: 24.05.23 - Version 1.2.3

Work as self contained element

Update: 24.05.23 - Version 1.2.4

Exposed states for focus

Update: 24.05.23 - Version 1.2.5

Content and focus exposed states

Update: 24.05.23 - Version 1.2.6

styling

Update: 24.05.23 - Version 1.2.7

tag styles fixed

Update: 25.05.23 - Version 1.2.8

Add styles for dropdown

Update: 25.05.23 - Version 1.2.9

Allow more characters to open a tag

Update: 25.05.23 - Version 1.2.10

Fix stylings

Update: 25.05.23 - Version 1.2.11

Fix styles when no tags are added

Update: 26.05.23 - Version 1.2.12

styles for dropdown

Update: 26.05.23 - Version 1.2.13

Add exposed state for plain text

Update: 26.05.23 - Version 1.2.14

Add Reset function

Update: 26.05.23 - Version 1.2.15

Allow refresh on the fly for initial content

Update: 26.05.23 - Version 1.2.16

Add disable mode and action

Update: 26.05.23 - Version 1.2.17

Fix height for input

Update: 26.05.23 - Version 1.2.18

Fix content plain text

Update: 26.05.23 - Version 1.2.19

Allow different styling

Update: 30.05.23 - Version 1.2.20

Click events

Update: 31.05.23 - Version 1.2.21

stable version

Update: 31.05.23 - Version 1.2.22

Updated field names and documentation

Update: 08.06.23 - Version 2.0.0

Initial Launch

Update: 08.06.23 - Version 2.0.1

Updated description

Update: 13.06.23 - Version 2.0.2

Fix background color

Update: 13.06.23 - Version 2.0.3

Add checks before creating tags

Update: 14.06.23 - Version 2.0.4

Fix infinite inputs

Update: 14.06.23 - Version 2.0.5

Gracefully Fail when a field is not found

Update: 19.06.23 - Version 2.0.6

Update content plain text algorithm

Update: 19.06.23 - Version 2.0.7

Update content plain text function

Update: 11.07.23 - Version 2.0.8

Add debug logs

Update: 11.07.23 - Version 2.0.9

Add debug messages

Update: 11.07.23 - Version 2.0.10

Fix tag creation bug

Update: 12.07.23 - Version 2.0.11

Re-render on property changes

Update: 20.07.23 - Version 2.0.12

Update used tags and contents on initial value set

Update: 20.07.23 - Version 2.0.13

Add option to vertically scroll on overflow

Update: 20.07.23 - Version 2.0.14

Add placeholder field

Update: 11.08.23 - Version 2.0.15

New name

Update: 16.10.23 - Version 2.0.16

Update V4

Update: 16.10.23 - Version 2.0.17

Update V4

Update: 07.11.23 - Version 2.0.18

Add debug info

Update: 09.11.23 - Version 2.0.19

Ignore empty tag values

Update: 26.01.24 - Version 2.0.20

Fix whitespace when exposing content tags

Update: 26.01.24 - Version 2.0.21

Fix background when hovering delete button

Update: 26.01.24 - Version 2.0.22

fix placeholder bug

Tagging and Mentioning Input