Text Array Input Showcase
Example
Component Documentation
Component Name
TextArrayInput
Builder Function Name
create_text_array_input_manager
Description
Builds an input for managing an array of text items. The user enters a string in a text field and clicks a button to add it to the array. They can reorder items (shift them up or down) or delete them. Optionally displayed in a popover when `is_popover` is true.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | array of strings or null | The initial list of text items. | |
| label | string or null | A label displayed above the text array input. | |
| placeholder | string or null | Placeholder text for the single-line input used when adding new items. | |
| is_no_spaces | boolean | false | If true, replaces spaces with nothing (like a no-space validator). |
| max_length | number | 255 | Maximum length allowed per item in the array. |
| is_disabled | boolean | false | If true, prevents adding or removing items, shifting them, etc. |
| ml | number | 0 | Margin left in rem. |
| mr | number | 0 | Margin right in rem. |
| mt | number | 0 | Margin top in rem. |
| mb | number | 0 | Margin bottom in rem. |
| border_radius | number | 1 | Border radius (in rem) for the added item containers. |
| is_popover | boolean | false | If true, the text array input is displayed inside a popover. Otherwise, it's shown inline. |
| header | string | Text Array Input | Popover header text if `is_popover` is true. |
| on_change | function or null | Callback triggered whenever the array changes (items added, removed, or shifted). Receives the updated array. | |
| on_finish | function or null | Called when the user finalizes (clicks 'Finish' if in a popover). Receives the final array. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Initializes state and managers. Called once with the config. | No Params | |
| set_val | Sets the entire array of text items programmatically. | No Params | |
| add_item | Adds the current text from `input_text_manager.val` to the array (if valid). | No Params | |
| delete_item | Removes the item at a given index. | No Params | |
| shift_item | Reorders items by moving one item up or down (the `shift_by` can be -1 or +1). | No Params | |
| finish | Closes the popover (if used) and calls `on_finish` with the final array. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | array of strings or null | The current list of items. Updated whenever items are added, deleted, or shifted. |
| input_text_manager | object | The text input manager for the single-line text field used to add items. |
| add_button_manager | object | Button manager for the 'add item' button. |
| val_prepped | array of objects | Metadata for each existing item in the array, including reorder and delete button managers. |
| popover_manager | object | If `is_popover` is true, controls the popover. You can open or close it with `manager.popover_manager.open()` or `manager.popover_manager.close()`. |
| finish_button_manager | object | Button manager for the 'Finish' button (only relevant when `is_popover` is true). |
