DynamicInput

Add/remove/edit for array fields; each row reuses the oas-input component, supporting controlled/uncontrolled modes, key-value pair rows, custom row content, and button sorting.

Basic Usage

Add/remove list

Example

model-value is a JSON array attribute (also assignable via property); each row has an input + remove button, with an "Add" button at the end. placeholder is passed through to every row input.

Default Value

default-value

Example

New rows start with default-value as their initial value.

Key-Value Pair Mode

preset=pair (env vars / params)

Example

With preset="pair" each row renders key/value inputs and the value channel becomes an object array [{ key, value }]:

• key-placeholder / value-placeholder set the two placeholders
• A new row starts as { key: "", value: "" }; write model-value directly for non-empty initial values
• Switching preset maps values losslessly: string → { key: value, value: "" }; object → key (falls back to value when key is empty)

Custom Row Content

template[slot=row]

Example

template[slot="row"] is cloned into every row (remove/sort buttons stay component-side):

• [data-row-value] nodes bind the row value automatically (under the pair preset, data-row-value binds the value part and data-row-key the key part)
• An oas-input inside the template syncs through the value channel automatically (composed delegation)
• For arbitrary controls (select / input-number, etc.), listen to oas-row-render (detail: { index, value, element }) and take over read/write yourself

Sorting

sortable move up/down buttons

Example

The sortable attribute adds move-up/move-down buttons at the end of each row: up is disabled on the first row, down on the last; sorting never changes the row count and is not limited by min; a reorder dispatches oas-change.

min / max Boundaries

min=2 fills up rows

Example

Under min, rows are auto-filled; when min is reached, remove buttons are disabled.

max=3 disables adding

Example

When max is reached, the "Add" button is disabled; an over-long model-value is truncated automatically.

Size & Status

size variants

Example

status

Example

size (small | medium | large) controls control height and font (it also reads the config-provider density injection); status (success | warning | error) is passed through to row inputs.

Disabled & Readonly

disabled

Example

readonly

Example

disabled disables everything; readonly makes row inputs read-only and disables add/remove/sort buttons (values stay copyable; form semantics differ from disabled).

Events

Add/remove/change events

Example

Listen to oas-add (detail: { index }) / oas-remove (detail: { index, value }) / oas-change (detail: { value }); focusing/blurring any row input dispatches oas-focus / oas-blur (detail: { index }):

Capability Overview (page notes)

• preset: input | pair; the pair preset uses a [{ key, value }] value channel
• placeholder / key-placeholder / value-placeholder: placeholder passthrough
• sortable: button-style move-up/move-down sorting (no drag-and-drop)
• size / status / readonly: three sizes, validation status, readonly (all follow library contracts)
• Slots: template[slot="row"] custom row content (data-row-value / data-row-key bindings)
• Events: oas-add { index }, oas-remove { index, value }, oas-focus / oas-blur { index }, oas-row-render { index, value, element } (existing oas-change unchanged)

API

oas-dynamic-input

Attributes

Attribute	Description	Type	Default
default-value	Default value for new rows	string	—
disabled	Disabled (row inputs + buttons)	boolean	—
key-placeholder	Key placeholder in pair form	string	—
max	Maximum rows; truncates when over	string	—
min	Minimum rows; auto-fills when below	string	0
model-value	String array (property or JSON)	DynamicInputRowValue[]	[]
placeholder	Row input placeholder	string	—
preset	Row form: input (default, single input) / pair (key-value double input)	string	—
readonly	Read-only (rows not editable, add/remove/sort buttons disabled, values copyable)	boolean	—
size	Size preset small / medium (default) / large	string	medium
sortable	Row sorting (move up/down buttons, value swap with focus kept; keyboard accessible)	boolean	—
status	Validation status: error / warning / success (passed to the row inputs)	string	—
value-placeholder	Value placeholder in pair form	string	—

Property (JS property; see each row for attribute reflection)

Property	Description	Type	Default
value	Current value: array of row values (string[] for input preset, { key, value }[] for pair preset)	DynamicInputRowValue[]	[]

Events

Event	Description
oas-add	Row added, detail: { index }
oas-blur	Row blurred, detail: { index }
oas-change	Dispatched after add/remove/edit, detail: { value }
oas-focus	Row focused, detail: { index }
oas-remove	Row removed, detail: { index, value }
oas-row-render	Fires on row render (custom row channel), detail: { index, value, element }

Slots

Name	Description
template[slot="row"]	Custom row content ([data-row-value]/[data-row-key] bindings; remove/sort buttons stay component-side)

Controlled: listen to oas-change and set the modelValue property (or the model-value attribute) to write back.