Form tag input

Turn a normal input into tags.

Usage

To apply this component, add data-f-tag-input attribute to a div inside your form and then apply the f-tag-input class to it. Inside this div you will need a hidden field that will be the one that gets posted to your server, a second input after this with a class of f-tag-input-main and an unordered list with the class of f-tag-input-list.

Example

Press enter to add

    Markup

    <form method="post" action="" class="f-form f-form-horizontal">
    	<div class="f-form-row">
    		<label class="f-form-label">Tag manager</label>
    		<div class="f-form-controls">
    			<div class="f-tag-input" data-f-tag-input>
    				<input type="hidden" name="tags-input" value="hello,kitty">
    				<input type="text" class="f-tag-input-main" autocomplete="off"><span class="f-margin-left no-cursor">Press enter to add</span>
    				<ul class="f-tag-input-list"></ul>
    			</div>
    		</div>
    	</div>
    </form>

    Change split character and auto-split

    You can change the character to split on, or whether to update the tags when this character is pressed (instead of enter) by passing options to your tag input element.

    Example

    Press | to add

      Markup

      <form method="post" action="" class="f-form f-form-horizontal">
      	<div class="f-form-row">
      		<label class="f-form-label">Tag manager</label>
      		<div class="f-form-controls">
      			<div class="f-tag-input" data-f-tag-input="{ splitCharacter : '|', enterOnSplitCharacter : true }">
      				<input type="hidden" name="tags-input" value="different|options">
      				<input type="text" class="f-tag-input-main" autocomplete="off"><span class="f-margin-left no-cursor">Press | to add</span>
      				<ul class="f-tag-input-list"></ul>
      			</div>
      		</div>
      	</div>
      </form>

      Add Tag Input Inside Dropdown

      This option requires the dropdown component to function correctly. It will show a dropdown on hover of the 'select' and allow you to add tags to the 'select' by clicking options in the dropdown.

      Example

        Please select... arrow_drop_down

        JavaScript options

        This is an example of how to set options via attribute:

        <div data-f-tag-input="{splitCharacter:',', enterOnSplitCharacter:false}">...
        Option Possible value Default Description
        splitCharacter any string , Character to perform the split between words on
        enterOnSplitCharacter boolean (true or false) false Whether to add a tag when the split character is pressed
        removeDuplicates boolean (true or false) true Checks the current list of tags for duplicates and doesn't add them