Dynamic Input

#Basic usage

dynamic-input/basic Vue React

dynamic-input/basic.vue

<script setup lang="ts">
import { DynamicInput } from "@bysages/vue";
import { ref } from "vue";

const emails = ref<string[]>(["[email protected]", ""]);
</script>

<template>
  <div class="grid gap-3 max-w-96">
    <DynamicInput v-model="emails" placeholder="[email protected]" />
    <p class="m-0 text-sm text-tertiary">values: {{ JSON.stringify(emails) }}</p>
  </div>
</template>

dynamic-input/min-max Vue React

Between 1 and 3 codes

dynamic-input/min-max.vue

<script setup lang="ts">
import { DynamicInput } from "@bysages/vue";
import { ref } from "vue";

const codes = ref<string[]>(["QH-01", "CL-02"]);
</script>

<template>
  <div class="grid gap-3 max-w-96">
    <DynamicInput v-model="codes" :min="1" :max="3" add-label="Add code" placeholder="Code" />
    <p class="m-0 text-sm text-tertiary">Between 1 and 3 codes</p>
  </div>
</template>

#Props

#DynamicInput

A column of entry rows: one Input per line, each with a quiet remove seal, and an add row at the tail. The list is controlled — every edit emits a fresh array and the parent's array stays the only truth. Deleting never drops below min, adding never grows past max, and the group always keeps one row: an entry list that emptied itself would leave the reader no place to type.

Prop	Type	Default	Description
`modelValue`	`Array as PropType<string[]>`	`() => [""]`	The rows' values; the group renders one Input per entry.
`min`	`Number`	`0`	The fewest rows the group keeps; the remove seals yield first.
`max`	`Number`	`undefined`	The most rows the group grows to; the add control yields then.
`placeholder`	`String`	`undefined`	—
`addLabel`	`String`	`"Add entry"`	The add control's visible words.
`disabled`	`Boolean`	`false`	—
`invalid`	`Boolean`	`false`	—
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the ladder, handed to every row's field and seals.