meteor-autoform-tags

AutoForm add-on, that provides an interactive tag input.

Example Project

You can check out the latest published state of this package using this example project.

Installation

You need aldeed:autoform >= 6 to use this package.

You can then install this package via

meteor add jkuester:autoform-tags

Creating a Tag-Field by Schema

Minimal

There are many options to configure this component. The most minimal approach is to define the autoform type to be 'tags':

1{
2	tags: {
3		type: Array,			// all tags will be saved in an array
4		autoform: {
5			type: 'tags',		// indicate to use tags add-on
6		},
7	},
8	'tags.$': {
9		type: String,
10	}
11}

With Boundaries

You can limit the amount of tags as you can do with any array in autoform. Furthermore you can limit the min/max length of the characters that are valid for each tag.

Validation for array size will be done by AutoForm while validation of character length is done within the component.

1{
2   tags: {
3   	type: Array,			// all tags will be saved in an array
4   	minCount: 2,			// minimum number of tags
5   	maxCount: 8,			// maximum number of tags
6   	autoform: {
7   		type: 'tags',		// indicate to use tags add-on
8   		max: 16,			// max length of a tag in chars
9   		min: 4,				// min length of a tag in chars
10   	},
11   },
12   'tags.$': {
13   	type: String,
14   }
15}

Note that max and min need to be defined within the autoform property of the array in order to behave properly.

With Support

You can declare a placeholder text as call to action as well define a list of suggestions. If a user clicks a tag in the list, it is immediately added to the tag stack. This list can also be used as source for allowed values.

1{
2  tags: {
3  	type: Array,			// all tags will be saved in an array
4  	autoform: {
5  		placeholder: 'Enter a tag...',
6  		type: 'tags',		// indicate to use tags add-on
7  		options: () => ['apple', 'cherry', 'orange'],	// list of tags to be suggested
8  		onlyOptions: false,  // if true only values in options are accepted
9  	},
10  },
11  'tags.$': {
12  	type: String,
13  }
14}

Full Example

You can also combine the above mentioned options:

1{
2  tags: {
3   	type: Array,			// all tags will be saved in an array
4   	minCount: 2,			// minimum number of tags
5   	maxCount: 8,			// maximum number of tags
6   	autoform: {
7   		placeholder: 'Enter a tag...',
8   		type: 'tags',		// indicate to use tags add-on
9   		max: 16,			// max length of a tag in chars
10   		min: 4,				// min length of a tag in chars
11   		options: () => ['apple', 'cherry', 'orange'],	// list of tags to be suggested
12   		onlyOptions: true,  // if true only values in options are allowed
13   	},
14   },
15   'tags.$': {
16   	type: String,
17   }
18}

Component Behavior and Interacting with Tags

You can click on the input or on the edit button to activate editing.
The input supports spaces between characters but trims whitespace to single space between characters.
To apply the entered tag hit either Enter, Tab or click the button with the check mark.
The entered text will remain, if the component looses focus but will not be applied.
If the same tag already exists in the stack, it will be highlighted on input. In this state the input is not accepted to be added to the stack.
If max or min are defined and the entered tag does not fulfill the requirements it will be highlighted together with the allowed text-size range, that appears in the upper-right part of the component.
Each tag can be edited by clicking the tag. Same functionality applies to the edited tag as for a new tag.
Each applies tag can be removed from the stack.
Clicking suggestions will add them immediatly to the stack and disable the selected ones.

Roadmap and Future Features

Enable/disable whitespaces via schema
Define bootstrap color-classes for highlighting doubles or insufficient character size via schema
Replace html icons with a library if such is installed
Support emojis / auto-transform tags into emojis