Axure Case: Make Tag Inputer and Tag Selector with Repeater


This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

When we use various app or web pages, we often have to find the content. The content filtering can be carried out by selecting labels. For example, when registering a new app, we will be allowed to choose tags of interests and hobbies. We can also customize our own tag. Today, let's learn how to make label inputer and selector.

Features to be Realized

Tag inputer and selector

1. When the bottom tag is selected, the top tag container show the selected tag. When the bottom tag  is unselected, the top tag container hides the selected tag.

2. When clicking the close icon of the selected tag in the top tag container, hide the selected tag and unselect the corresponding tag at the bottom.

3. After entering text in the input box of the top tag container, press enter or return key to add a responding tag to the top tag container.

How to Realize these Features

1. Make selectable tags and selected labels through 2 repeaters. When the unselected tag at the bottom is clicked, the tag at the bottom is selected, and the corresponding row is added to the repeater at the top. When the selected tag at the bottom is clicked, unselect the tag at the bottom and delete the corresponding row in the repeater at the top.

2. When the close icon is clicked, the row at the top is deleted and the corresponding row of the repeater at the bottom is unselected.

3. After entering the text in the input box at the top, press enter or return key to add the corresponding row to the repeater at the top.

Preview the completed prototype for this tutorial

Widgets Setup 

Widgets setup

1. The top repeater includes a button and a close icon and a text field. The close icon and text field need to be set to move to the corresponding position when loaded. The repeater only needs one column and deletes all data. Create all widgets as a dynamic panel and uncheck fit to content.

Button selectable tags

2. The repeater at the bottom needs two columns: Name and Selected.  Sets the selected style for the bottom tags.

Interactions Setup

Bottom Repeater Tag Settings

Button Tags interactions

1.  When the bottom tag is clicked, judge whether the item.Selected is equal to 1. If not, set it to 1, and add a row with the same name to the top repeater; If so, set it to 0 and delete the corresponding row in the top repeater.

2. when tag loaded, judge whether the item.Selected is equal to 1. If not, set tag  selected state true,  If so, set tag selected state false.


Bottom Repeater Tag Settings

Top tag interactions

When each item of the repeater is loaded, if the number of visible items is 0, the repeater is hidden. 

Move the input to the + 8 position on the right side of the repeater.

Input box Settings 

Input tag interactiton

When the key is pressed, if the inputed text is not empty and the key is Enter or Return, the top repeater adds a row of inputed text.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.