# VariablePathInput — SvelteKit UI

Package: sveltekit-ui 1.1.87

Page: https://www.sveltekit-ui.com/components/variable_path_input

Category: Input controls

Selects a named variable and edits a path through object properties, numeric indexes, or nested variable-based path segments.

Public component import: `VariablePathInput`

Public manager import: `create_variable_path_input_manager`

## Component notes

- notes:
  - The manager only edits a path; resolve its value against your own definition stack or through the library's compatible variable-path utilities. No data fetching or variable persistence is included.

## Usage

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

  let chosen_path = $state(["profile", "name"])

  const manager = create_variable_path_input_manager({
    val: ["profile", "name"],
    get_defined_options: () => [{
      key: "profile",
      name: "Profile",
      data_type: {
        type: "object_literal",
        properties: { name: { type: "string_literal" } },
      },
    }],
    on_finish: (value) => {
      chosen_path = value
      manager.close_popover()
    },
  })
</script>

<VariablePathInput {manager} />
<pre>{JSON.stringify(chosen_path)}</pre>
```

## Configuration

### `val`

- type: array
- default:
- description: Path array: [variable_key, ...segments]. A segment is a property string, integer index, or another variable path array used as a dynamic segment.

### `get_defined_options`

- type: function
- description: Return Dropdown records { key: variable_key, name: string, data_type?: descriptor }. Called during initialization and when the variable dropdown opens. data_type follows DataTypeInput shapes and supplies property suggestions.

### `levels_nested`

- type: number
- default: 0
- description: Display depth for nested path editors; child managers increment it automatically.

### `on_dropdown_opened`

- type: function
- description: Called when the editor popover opens.

### `on_finish`

- type: function
- description: Receives the current path after Finish. The top-level editor does not close automatically; call manager.close_popover() in this callback if desired.

## Methods

### `close_popover()`

- returns: void
- description: Close the path editor popover.

## Returned state

### `val`

- type: array
- description: Current named-variable path; [] when no variable is chosen.

### `val_text`

- type: string
- description: Readable bracketed path, including nested paths.

### `variable_data_type_at_path`

- type: object | null
- description: Data-type metadata encountered while preparing the current path.

### `levels_nested`

- type: number
- description: Current nesting depth.

### `path_prepped`

- type: array
- description: Per-segment UI managers and values, including recursive VariablePathInput managers.

### `popover_manager`

- type: object
- description: Child UI manager rendered by VariablePathInput.

### `open_edit_button_manager`

- type: object
- description: Child UI manager rendered by VariablePathInput.

### `def_dropdown_manager`

- type: object
- description: Child UI manager rendered by VariablePathInput.

### `add_path_item_button_manager`

- type: object
- description: Child UI manager rendered by VariablePathInput.

### `finish_button_manager`

- type: object
- description: Child UI manager rendered by VariablePathInput.