Tag Selector

The Tag Selector component allows you to add multiple tags to a string or array field.

Ways to use a Tag Selector component

Use it with forms to easily select multiple tags to store in a single input field.

Add a tag selector to a form and use a function to populate the options. This allows the user to select multiple tags and associate it with a string or array input.

Configuring your Tag selector

The Tag Selector can be configured in two ways, one without a source and one using a source to populate the tag options.

You can give your component a name, and input placeholder text that will be shown in the tag selector (before a user selects an option).

1) Without a source, you'll manually define tag selector options:

Create tag selector options by inputting what you want displayed (Red Ball, Purple Shoe), and then the value you want to submit (redball, purpshoe), separated by a comma. Each option gets its own line.

Use default value if you want the tag selector to default to a specific value before a user interacts with it. You can populate with comma separated values or bind to a value in your Space.

If you need your value to be converted to a String, check the box "Convert value to CSV string". This will be necessary if you're passing the tag values to a form with a string input. Otherwise, the value will be stored as an array of values (JSON).

2) Use a source to populate tag selector options:

Choose the function you want to use to populate the list of available tags. Each record retrieved from your function becomes an option, and you'll simply specify an attribute you want to use for the display name ("Display Name per Option") and an attribute you want to use for the actual value that is passed ("Value per Option).

Use default value if you want the tag selector to default to a specific value before a user interacts with it. You can populate with comma separated values or bind to a value in your Space.

If you need your value to be converted to a String, check the box "Convert value to CSV string". This will be necessary if you're passing the tag values to a form with a string input. Otherwise, the value will be stored as an array of values (JSON).

📘

Note:

Only the first 5000 records are pulled when populating options from a source. You can use filters and sorting to narrow down/specify the records you want to use in this tag selector component.

Sorting

Choose the field to sort by and then "Ascending" or "Descending".

Filters

Set rules to determine which records from your Function are used to populate the tag selector.

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with, but only when the tag is converted to a CVS string.

Design

You can customize the design attributes of the Tag Selector component.