Components / Input controls

Text Array Input

Component + manager

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.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentTextArrayInput

Managercreate_text_array_input_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { TextArrayInput, create_text_array_input_manager } from "sveltekit-ui"

  const manager = create_text_array_input_manager({
    label: "Project tags",
    placeholder: "Add a tag",
    val: ["svelte", "design"],
    max_length: 24,
  })
</script>

<TextArrayInput {manager} />
<p>Tags: {(manager.val ?? []).join(", ")}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

15 entries in configuration

Property	Type	Default	Description
`val`	`array of strings or null`	`null`	The initial list of text items.
`label`	`string or null`	`null`	A label displayed above the text array input.
`placeholder`	`string or null`	`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.