Components

Tag Selector

Add multiple tags to a string or array field with the tag selector component.

Ways to use a tag 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.

Quick tutorial

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

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.