# DataTypeInput — SvelteKit UI

Package: sveltekit-ui 1.1.87

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

Category: Input controls

Builds a structured data-type descriptor with object properties, uniform collections, and optional foreign-row table references.

Public component import: `DataTypeInput`

Public manager import: `create_data_type_input_manager`

## Component notes

- notes:
  - Use object_literal.properties for named properties and array_uniform_literal/object_uniform_literal.items for a shared nested type. Property display_order controls ordering. The per-item array_literal editor is currently unfinished; prefer uniform array descriptors.

## Usage

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

  let saved_type = $state(null)

  const manager = create_data_type_input_manager({
    label: "Profile structure",
    val: {
      type: "object_literal",
      properties: {
        name: { type: "string_literal", display_order: 0 },
        age: { type: "number_literal", display_order: 1 },
      },
    },
    data_sample: { name: "Alex", age: 28 },
    on_finish: (value) => { saved_type = value },
  })
</script>

<DataTypeInput {manager} />
<pre>{JSON.stringify(saved_type ?? manager.val, null, 2)}</pre>
```

## Configuration

### `label`

- type: string
- default: Data Type
- description: Display label for the builder.

### `val`

- type: object | null
- default: null
- description: Initial descriptor: { type: literal node-type id, attributes?: object, properties?: descriptors keyed by name, items?: descriptor }. Examples include string_literal, number_literal, object_literal, array_uniform_literal, and object_uniform_literal. See node_types and json_to_data_type public exports.

### `breadcrumbs`

- type: array
- default:
- description: Initial nested descriptor path. Object property keys traverse properties; uniform collection path steps traverse items.

### `data_sample`

- type: any | function
- default: null
- description: Sample data used by Guess From Variables. A callback is read reactively; the builder does not fetch data.

### `table_options`

- type: array
- description: Optional Dropdown records { key: table_id, name: string } for table_id_for_foreign_row_literal and property_key_table_id attributes.

### `on_finish`

- type: function
- description: Called with the current descriptor when Finish is selected; the popover closes.

## Methods

### `set_data_type()`

- parameters:
  - type_key: literal node-type id
  - breadcrumbs_input: array | null (default current path)
- returns: void
- description: Replace the descriptor at the current or specified path with a fresh type descriptor. Existing nested fields at that path are reset.

### `add_object_property()`

- parameters:
  - key: string | null (default add-property input)
- returns: void
- description: Add a cleaned lowercase underscore property to the object at the current breadcrumb path.

### `delete_object_property()`

- parameters:
  - property_key: string
- returns: void
- description: Remove a property of the current object and rebuild property controls.

### `shift_object_property()`

- parameters:
  - property_key: string
  - direction: -1 | 1
- returns: void
- description: Move a property up or down in display order.

### `guess_from_data()`

- parameters:
  - data: any
- returns: void
- description: Replace val with json_to_data_type(data) and rebuild property controls.

### `guess_from_variables()`

- returns: void
- description: Infer the descriptor from the current data_sample.

### `finish()`

- returns: void
- description: Close the builder and emit val through on_finish.

## Returned state

### `id`

- type: string
- description: Unique manager id.

### `label`

- type: string
- description: Configured label.

### `initial_val`

- type: object | null
- description: Initial configured descriptor.

### `val`

- type: object | null
- description: Current data-type descriptor.

### `val_at_path`

- type: object | null
- description: Descriptor at the current breadcrumb path.

### `type_display_name`

- type: string | null
- description: Readable representation of the current descriptor.

### `data_sample`

- type: any
- description: Current sample for type inference.

### `table_options`

- type: array | undefined
- description: Configured foreign-row table choices.

### `type_options`

- type: array
- description: Literal types filtered by the search field.

### `type_option_buttons`

- type: array
- description: Type choices with button managers.

### `property_type_options`

- type: object
- description: Per-property type selectors, edit popovers, reorder and delete actions.

### `popover_manager`

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

### `search_text_input_manager`

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

### `breadcrumbs_manager`

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

### `items_type_options_dropdown_manager`

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

### `type_options_dropdown_manager`

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

### `property_key_to_add_text_manager`

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

### `property_key_to_add_finish_button_manager`

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

### `edit_items_type_button_manager`

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

### `finish_button_manager`

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

### `table_id_for_foreign_row_text_input_manager`

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

### `property_key_table_id_for_foreign_row_text_input_manager`

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

### `clear_breadcrumbs_button_manager`

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

### `guess_from_variables_button_manager`

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