Dynamic

A component for managing a dynamic list of tags or values with add and remove capabilities.

<script setup lang="ts">
import { ref } from 'vue'
import { Dynamic } from '@destyler-ui/vue'

const frameworks = ref(['react', 'solid', 'vue'])
</script>

<template>
  <Dynamic.Root v-model="frameworks">
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemPreview>
            <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
            <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
          </Dynamic.ItemPreview>
          <Dynamic.ItemInput />
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add tag" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { useState } from 'react'
import { Dynamic } from '@destyler-ui/react'

export function Basic() {
  const [frameworks, setFrameworks] = useState<string[]>(['react', 'solid', 'vue'])

  return (
    <Dynamic.Root value={frameworks} onValueChange={details => setFrameworks(details.value)}>
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemPreview>
                    <Dynamic.ItemText>{value}</Dynamic.ItemText>
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.ItemPreview>
                  <Dynamic.ItemInput />
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add tag" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function Basic() {
  return (
    <Dynamic.Root>
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemPreview>
                      <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                      <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                    </Dynamic.ItemPreview>
                    <Dynamic.ItemInput />
                  </Dynamic.Item>
                )}
              </Index>
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear All</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state(['react', 'solid', 'vue'])
</script>

<Dynamic.Root bind:value={values}>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemPreview><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.ItemPreview><Dynamic.ItemInput /></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add tag" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Anatomy

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root>
    <Dynamic.Label />
    <Dynamic.Control>
      <Dynamic.Item>
        <Dynamic.ItemPreview>
          <Dynamic.ItemText />
          <Dynamic.ItemDeleteTrigger />
        </Dynamic.ItemPreview>
        <Dynamic.ItemInput />
      </Dynamic.Item>
      <Dynamic.Input />
      <Dynamic.ClearTrigger />
    </Dynamic.Control>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Dynamic.Root>
      <Dynamic.Label />
      <Dynamic.Control>
        <Dynamic.Item>
          <Dynamic.ItemPreview>
            <Dynamic.ItemText />
            <Dynamic.ItemDeleteTrigger />
          </Dynamic.ItemPreview>
          <Dynamic.ItemInput />
        </Dynamic.Item>
        <Dynamic.Input />
        <Dynamic.ClearTrigger />
      </Dynamic.Control>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid'
import { Index } from 'solid-js'

export default function Basic() {
  return (
    <Dynamic.Root defaultValue={['Solid']}>
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label />
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemPreview>
                      <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                      <Dynamic.ItemDeleteTrigger />
                    </Dynamic.ItemPreview>
                    <Dynamic.ItemInput />
                  </Dynamic.Item>
                )}
              </Index>
              <Dynamic.Input />
              <Dynamic.ClearTrigger />
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state(['react', 'solid', 'vue'])
</script>

<Dynamic.Root bind:value={values}>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemPreview><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.ItemPreview><Dynamic.ItemInput /></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add tag" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Examples

Basic

<script setup lang="ts">
import { ref } from 'vue'
import { Dynamic } from '@destyler-ui/vue'

const frameworks = ref(['react', 'solid', 'vue'])
</script>

<template>
  <Dynamic.Root v-model="frameworks">
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemPreview>
            <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
            <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
          </Dynamic.ItemPreview>
          <Dynamic.ItemInput />
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add tag" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { useState } from 'react'
import { Dynamic } from '@destyler-ui/react'

export function Basic() {
  const [frameworks, setFrameworks] = useState<string[]>(['react', 'solid', 'vue'])

  return (
    <Dynamic.Root value={frameworks} onValueChange={details => setFrameworks(details.value)}>
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemPreview>
                    <Dynamic.ItemText>{value}</Dynamic.ItemText>
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.ItemPreview>
                  <Dynamic.ItemInput />
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add tag" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function Basic() {
  return (
    <Dynamic.Root>
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemPreview>
                      <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                      <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                    </Dynamic.ItemPreview>
                    <Dynamic.ItemInput />
                  </Dynamic.Item>
                )}
              </Index>
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear All</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state(['react', 'solid', 'vue'])
</script>

<Dynamic.Root bind:value={values}>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemPreview><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.ItemPreview><Dynamic.ItemInput /></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add tag" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Initial Value

Set the initial values for the dynamic list.

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
import { ref } from 'vue'

const frameworks = ref(['React', 'Solid', 'Vue'])
</script>

<template>
  <Dynamic.Root v-model="frameworks">
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { useState } from 'react'
import { Dynamic } from '@destyler-ui/react'

export function InitialValue() {
  const [frameworks, setFrameworks] = useState<string[]>(['React', 'Solid', 'Vue'])

  return (
    <Dynamic.Root value={frameworks} onValueChange={details => setFrameworks(details.value)}>
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function InitialValue() {
  return (
    <Dynamic.Root value={['React', 'Solid', 'Vue']}>
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add tag" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state(['React', 'Solid', 'Vue'])
</script>

<Dynamic.Root bind:value={values}>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Blur Behavior

Configure behavior when the input loses focus.

<Dynamic.HiddenInput />
<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root blurBehavior="add">
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export function BlurBehavior() {
  return (
    <Dynamic.Root blurBehavior="add">
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function BlurBehavior() {
  return (
    <Dynamic.Root blurBehavior="add">
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add Framework" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state<string[]>([])
</script>

<Dynamic.Root bind:value={values} blurBehavior="add">
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Paste Behavior

Handle pasting multiple values at once.

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root addOnPaste delimiter=",">
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export function PasteBehavior() {
  return (
    <Dynamic.Root addOnPaste delimiter=",">
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function PasteBehavior() {
  return (
    <Dynamic.Root addOnPaste delimiter=",">
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add Framework" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state<string[]>([])
</script>

<Dynamic.Root bind:value={values} addOnPaste delimiter=",">
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Disabled Editing

Disable editing of existing items.

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root :allowEditTag="false">
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export function DisabledEditing() {
  return (
    <Dynamic.Root editable={false}>
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function DisabledEditing() {
  return (
    <Dynamic.Root editable={false}>
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add Framework" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state<string[]>([])
</script>

<Dynamic.Root bind:value={values} editable={false}>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Max With Overflow

Limit the maximum number of items with overflow handling.

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root :max="3" allowOverflow>
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export function MaxWithOverflow() {
  return (
    <Dynamic.Root max={3} allowOverflow>
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function MaxWithOverflow() {
  return (
    <Dynamic.Root max={3} allowOverflow>
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add Framework" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state<string[]>([])
</script>

<Dynamic.Root bind:value={values} max={3} allowOverflow>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

Validated

Add validation to the input values.

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root
    :validate="
      (details) => {
        return !details.value.includes(details.inputValue)
      }
    "
  >
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export function Validated() {
  return (
    <Dynamic.Root
      validate={(details) => {
        return !details.value.includes(details.inputValue)
      }}
    >
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function Validated() {
  return (
    <Dynamic.Root
      validate={(details) => {
        return !details.value.includes(details.inputValue)
      }}
    >
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add Framework" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state<string[]>([])
</script>

<Dynamic.Root bind:value={values} validate={details => !details.value.includes(details.inputValue)}>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

On Event

Listen for add and remove events.

<script setup lang="ts">
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Dynamic.Root
    @value-change="(details) => console.log(details)"
    @highlight-change="(details) => console.log(details)"
    @value-invalid="(details) => console.log(details)"
  >
    <Dynamic.Context v-slot="tagsInput">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemInput />
          <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
          <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
</template>

import { Dynamic } from '@destyler-ui/react'

export function OnEvent() {
  return (
    <Dynamic.Root
      // eslint-disable-next-line no-console
      onValueChange={details => console.log(details)}
      // eslint-disable-next-line no-console
      onHighlightChange={details => console.log(details)}
      // eslint-disable-next-line no-console
      onValueInvalid={details => console.log(details)}
    >
      <Dynamic.Context>
        {tagsInput => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              {tagsInput.value.map((value, index) => (
                <Dynamic.Item key={index} index={index} value={value}>
                  <Dynamic.ItemInput />
                  <Dynamic.ItemText>{value}</Dynamic.ItemText>
                  <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                </Dynamic.Item>
              ))}
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </Dynamic.Control>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function OnEvent() {
  return (
    <Dynamic.Root
      onValueChange={(details) => {
        console.warn('tags changed to:', details.value)
      }}
      onHighlightChange={(details) => {
        console.warn('highlighted tag:', details.highlightedValue)
      }}
      onValueInvalid={(details) => {
        console.warn('Invalid!', details.reason)
      }}
      max={3}
      allowOverflow
      validate={(details) => {
        return !details.value.includes(details.inputValue)
      }}
    >
      <Dynamic.Context>
        {api => (
          <>
            <Dynamic.Label>Frameworks</Dynamic.Label>
            <Dynamic.Control>
              <Index each={api().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                    <Dynamic.ItemInput />
                    <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                  </Dynamic.Item>
                )}
              </Index>
            </Dynamic.Control>
            <Dynamic.Input placeholder="Add Framework" />
            <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
          </>
        )}
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
  )
}

<script lang="ts">
  import { Dynamic } from '@destyler-ui/svelte'

  let values = $state<string[]>([])
</script>

<Dynamic.Root
  bind:value={values}
  onValueChange={details => console.log(details)}
  onHighlightChange={details => console.log(details)}
  onValueInvalid={details => console.log(details)}
>
  <Dynamic.Label>Frameworks</Dynamic.Label>
  <Dynamic.Control>
    {#each values as value, index (`${value}-${index}`)}
      <Dynamic.Item {index} {value}><Dynamic.ItemInput /><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.Item>
    {/each}
    <Dynamic.Input placeholder="Add Framework" />
    <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
  </Dynamic.Control>
  <Dynamic.HiddenInput />
</Dynamic.Root>

With Field

Combine with a form field for validation and labeling.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { Dynamic } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Dynamic.Root>
      <Dynamic.Context v-slot="tagsInput">
        <Dynamic.Label>Label</Dynamic.Label>
        <Dynamic.Control>
          <Dynamic.Item v-for="(value, index) in tagsInput.value" :key="index" :index="index" :value="value">
            <Dynamic.ItemPreview>
              <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
              <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
            </Dynamic.ItemPreview>
            <Dynamic.ItemInput />
          </Dynamic.Item>
          <Dynamic.Input placeholder="Add Framework" />
          <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
        </Dynamic.Control>
      </Dynamic.Context>
      <Dynamic.HiddenInput />
    </Dynamic.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { Dynamic } from '@destyler-ui/react'

export interface WithFieldProps {
  invalid?: boolean
}

export function WithField({ invalid }: WithFieldProps = {}) {
  return (
    <Field.Root invalid={invalid}>
      <Dynamic.Root>
        <Dynamic.Context>
          {tagsInput => (
            <>
              <Dynamic.Label>Label</Dynamic.Label>
              <Dynamic.Control>
                {tagsInput.value.map((value, index) => (
                  <Dynamic.Item key={index} index={index} value={value}>
                    <Dynamic.ItemPreview>
                      <Dynamic.ItemText>{value}</Dynamic.ItemText>
                      <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                    </Dynamic.ItemPreview>
                    <Dynamic.ItemInput />
                  </Dynamic.Item>
                ))}
                <Dynamic.Input placeholder="Add Framework" />
                <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
              </Dynamic.Control>
            </>
          )}
        </Dynamic.Context>
        <Dynamic.HiddenInput />
      </Dynamic.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Dynamic } from '@destyler-ui/solid/dynamic'
import { Field } from '@destyler-ui/solid/field'
import { Index } from 'solid-js'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <Dynamic.Root>
        <Dynamic.Context>
          {dynamic => (
            <>
              <Dynamic.Label>Label</Dynamic.Label>
              <Index each={dynamic().value}>
                {(value, index) => (
                  <Dynamic.Item index={index} value={value()}>
                    <Dynamic.ItemPreview>
                      <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                      <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                    </Dynamic.ItemPreview>
                    <Dynamic.ItemInput />
                  </Dynamic.Item>
                )}
              </Index>
              <Dynamic.Input placeholder="Add Framework" />
              <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
            </>
          )}
        </Dynamic.Context>
        <Dynamic.HiddenInput />
      </Dynamic.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  export interface WithFieldProps {
    invalid?: boolean
  }
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { Dynamic } from '@destyler-ui/svelte'

  const { invalid = false }: WithFieldProps = $props()
  let values = $state<string[]>([])
</script>

<Field.Root {invalid}>
  <Dynamic.Root bind:value={values}>
    <Dynamic.Label>Label</Dynamic.Label>
    <Dynamic.Control>
      {#each values as value, index (`${value}-${index}`)}
        <Dynamic.Item {index} {value}><Dynamic.ItemPreview><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.ItemPreview><Dynamic.ItemInput /></Dynamic.Item>
      {/each}
      <Dynamic.Input placeholder="Add Framework" />
      <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
    </Dynamic.Control>
    <Dynamic.HiddenInput />
  </Dynamic.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { Dynamic, useDynamic } from '@destyler-ui/vue'

const dynamic = useDynamic()
</script>

<template>
  <button @click="dynamic.focus()">Focus</button>

  <Dynamic.RootProvider :value="dynamic">
    <Dynamic.Context v-slot="dynamic">
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        <Dynamic.Item v-for="(value, index) in dynamic.value" :key="index" :index="index" :value="value">
          <Dynamic.ItemPreview>
            <Dynamic.ItemText>{{ value }}</Dynamic.ItemText>
            <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
          </Dynamic.ItemPreview>
          <Dynamic.ItemInput />
        </Dynamic.Item>
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    </Dynamic.Context>
    <Dynamic.HiddenInput />
  </Dynamic.RootProvider>
</template>

import { Dynamic, useDynamic } from '@destyler-ui/react'

export function RootProvider() {
  const dynamic = useDynamic()

  return (
    <>
      <button type="button" onClick={() => dynamic.focus()}>Focus</button>

      <Dynamic.RootProvider value={dynamic}>
        <Dynamic.Context>
          {dynamicContext => (
            <>
              <Dynamic.Label>Frameworks</Dynamic.Label>
              <Dynamic.Control>
                {dynamicContext.value.map((value, index) => (
                  <Dynamic.Item key={index} index={index} value={value}>
                    <Dynamic.ItemPreview>
                      <Dynamic.ItemText>{value}</Dynamic.ItemText>
                      <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                    </Dynamic.ItemPreview>
                    <Dynamic.ItemInput />
                  </Dynamic.Item>
                ))}
                <Dynamic.Input placeholder="Add Framework" />
                <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
              </Dynamic.Control>
            </>
          )}
        </Dynamic.Context>
        <Dynamic.HiddenInput />
      </Dynamic.RootProvider>
    </>
  )
}

import { Dynamic, useDynamic } from '@destyler-ui/solid/dynamic'
import { Index } from 'solid-js'

export function RootProvider() {
  const dynamic = useDynamic()

  return (
    <>
      <button onClick={() => dynamic().focus()}>Focus</button>

      <Dynamic.RootProvider value={dynamic}>
        <Dynamic.Context>
          {api => (
            <>
              <Dynamic.Label>Frameworks</Dynamic.Label>
              <Dynamic.Control>
                <Index each={api().value}>
                  {(value, index) => (
                    <Dynamic.Item index={index} value={value()}>
                      <Dynamic.ItemPreview>
                        <Dynamic.ItemText>{value()}</Dynamic.ItemText>
                        <Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger>
                      </Dynamic.ItemPreview>
                      <Dynamic.ItemInput />
                    </Dynamic.Item>
                  )}
                </Index>
                <Dynamic.Input placeholder="Add Framework" />
                <Dynamic.ClearTrigger>Clear All</Dynamic.ClearTrigger>
              </Dynamic.Control>
            </>
          )}
        </Dynamic.Context>
        <Dynamic.HiddenInput />
      </Dynamic.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Dynamic, useDynamic } from '@destyler-ui/svelte'

  const id = $props.id()
  const dynamic = useDynamic({ id })
</script>

<button type="button" onclick={() => dynamic().focus()}>Focus</button>
<Dynamic.RootProvider value={dynamic}>
  <Dynamic.Context>
    {#snippet render(api)}
      <Dynamic.Label>Frameworks</Dynamic.Label>
      <Dynamic.Control>
        {#each api().value as value, index (`${value}-${index}`)}
          <Dynamic.Item {index} {value}><Dynamic.ItemPreview><Dynamic.ItemText>{value}</Dynamic.ItemText><Dynamic.ItemDeleteTrigger>Delete</Dynamic.ItemDeleteTrigger></Dynamic.ItemPreview><Dynamic.ItemInput /></Dynamic.Item>
        {/each}
        <Dynamic.Input placeholder="Add Framework" />
        <Dynamic.ClearTrigger>Clear all</Dynamic.ClearTrigger>
      </Dynamic.Control>
    {/snippet}
  </Dynamic.Context>
  <Dynamic.HiddenInput />
</Dynamic.RootProvider>

API Reference

Root

Prop	Default	Type
`addOnPaste`	`false`	`false \| true` Whether to add a tag when you paste values into the dynamic
`allowOverflow`	—	`false \| true` Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether the input should be auto-focused
`blurBehavior`	—	`"add" \| "clear"` The behavior of the dynamic when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`defaultValue`	—	`string[]` The initial value of the dynamic when it is first rendered. Use when you do not need to control the state of the dynamic.
`delimiter`	`","`	`string \| RegExp` The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`disabled`	—	`false \| true` Whether the dynamic should be disabled
`editable`	`true`	`false \| true` Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`form`	—	`string` The associate form of the underlying input element.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: dynamic.ItemProps) => string; itemDeleteTrigger: (opts: dynamic.ItemProps) => string; itemInput: (opts: dynamic.ItemProps) => string; }>` The ids of the elements in the dynamic. Useful for composition.
`inputValue`	—	`string` The dynamic's value
`invalid`	—	`false \| true` Whether the dynamic is invalid
`max`	`Infinity`	`number` The max number of tags
`maxLength`	—	`number` The max length of the input.
`modelValue`	—	`string[]`
`name`	—	`string` The name attribute for the input. Useful for form submissions
`readOnly`	—	`false \| true` Whether the dynamic should be read-only
`required`	—	`false \| true` Whether the dynamic is required
`translations`	—	`dynamic.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`validate`	—	`(details: dynamic.ValidateArgs) => boolean` Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.

Emit	Event
`focusOutside`	`[event: FocusOutsideEvent]` Function called when the focus is moved outside the component
`highlightChange`	`[details: HighlightChangeDetails]` Callback fired when a tag is highlighted by pointer or keyboard navigation
`inputValueChange`	`[details: InputValueChangeDetails]` Callback fired when the input value is updated
`interactOutside`	`[event: InteractOutsideEvent]` Function called when an interaction happens outside the component
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` Function called when the pointer is pressed down outside the component
`update:modelValue`	`[value: string[]]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Callback fired when the tag values is updated
`valueInvalid`	`[details: ValidityChangeDetails]` Callback fired when the max tag count is reached or the `validateTag` function returns `false`

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index*`	—	`string \| number`
`value*`	—	`string`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true`

ItemContext

No serializable props or emits are declared for this part.

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`addOnPaste`	`false`	`false \| true` Whether to add a tag when you paste values into the tag input
`allowOverflow`	—	`false \| true` Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether the input should be auto-focused
`blurBehavior`	—	`"clear" \| "add"` The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`defaultValue`	—	`string[]` The initial value of the dynamic when it is first rendered. Use when you do not need to control the state of the dynamic.
`delimiter`	`","`	`string \| RegExp` The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`disabled`	—	`false \| true` Whether the tags input should be disabled
`editable`	`true`	`false \| true` Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`form`	—	`string` The associate form of the underlying input element.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: dynamic.ItemProps) => string; itemDeleteTrigger: (opts: dynamic.ItemProps) => string; itemInput: (opts: dynamic.ItemProps) => string; }>` The ids of the elements in the tags input. Useful for composition.
`inputValue`	—	`string` The tag input's value
`invalid`	—	`false \| true` Whether the tags input is invalid
`max`	`Infinity`	`number` The max number of tags
`maxLength`	—	`number` The max length of the input.
`name`	—	`string` The name attribute for the input. Useful for form submissions
`onFocusOutside`	—	`(event: calendar.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`	—	`(details: dynamic.HighlightChangeDetails) => void` Callback fired when a tag is highlighted by pointer or keyboard navigation
`onInputValueChange`	—	`(details: dynamic.InputValueChangeDetails) => void` Callback fired when the input value is updated
`onInteractOutside`	—	`(event: calendar.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`	—	`(event: calendar.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: dynamic.ValueChangeDetails) => void` Callback fired when the tag values is updated
`onValueInvalid`	—	`(details: ValidityChangeDetails) => void` Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`readOnly`	—	`false \| true` Whether the tags input should be read-only
`required`	—	`false \| true` Whether the tags input is required
`translations`	—	`dynamic.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`validate`	—	`(details: dynamic.ValidateArgs) => boolean` Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`value`	—	`string[]` The tag values

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseDynamicContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index*`	—	`string \| number`
`value*`	—	`string`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true`

ItemContext

Prop	Default	Type
`children*`	—	`(context: UseDynamicItemContext) => ReactNode`

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseDynamicReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`addOnPaste`	`false`	`false \| true` Whether to add a tag when you paste values into the tag input
`allowOverflow`	—	`false \| true` Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`asChild`	—	`(props: (userProps?: solid_js126.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether the input should be auto-focused
`blurBehavior`	—	`"clear" \| "add"` The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`defaultValue`	—	`string[]` The initial value of the tags input when it is first rendered. Use when you do not need to control the state of the tags input.
`delimiter`	`","`	`string \| RegExp` The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`disabled`	—	`false \| true` Whether the tags input should be disabled
`editable`	`true`	`false \| true` Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`form`	—	`string` The associate form of the underlying input element.
`ids`	—	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }>` The ids of the elements in the tags input. Useful for composition.
`inputValue`	—	`string` The tag input's value
`invalid`	—	`false \| true` Whether the tags input is invalid
`max`	`Infinity`	`number` The max number of tags
`maxLength`	—	`number` The max length of the input.
`name`	—	`string` The name attribute for the input. Useful for form submissions
`onFocusOutside`	—	`(event: dynamic.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`	—	`(details: HighlightChangeDetails) => void` Callback fired when a tag is highlighted by pointer or keyboard navigation
`onInputValueChange`	—	`(details: dynamic.InputValueChangeDetails) => void` Callback fired when the input value is updated
`onInteractOutside`	—	`(event: dynamic.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`	—	`(event: dynamic.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: ValueChangeDetails) => void` Callback fired when the tag values is updated
`onValueInvalid`	—	`(details: ValidityChangeDetails) => void` Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`readOnly`	—	`false \| true` Whether the tags input should be read-only
`required`	—	`false \| true` Whether the tags input is required
`translations`	—	`dynamic.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`validate`	—	`(details: dynamic.ValidateArgs) => boolean` Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`value`	—	`string[]` The tag values

ClearTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseDynamicContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index*`	—	`string \| number`
`value*`	—	`string`
`asChild`	—	`(props: (userProps?: solid_js126.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true`

ItemContext

Prop	Default	Type
`children*`	—	`(context: UseDynamicItemContext) => Element`

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js126.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseDynamicReturn`
`asChild`	—	`(props: (userProps?: solid_js126.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`addOnPaste`	`false`	`false \| true` Whether to add a tag when you paste values into the tag input
`allowOverflow`	—	`false \| true` Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`autoFocus`	—	`false \| true` Whether the input should be auto-focused
`blurBehavior`	—	`"clear" \| "add"` The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`string[]`
`delimiter`	`","`	`string \| RegExp` The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`disabled`	—	`false \| true` Whether the tags input should be disabled
`editable`	`true`	`false \| true` Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`form`	—	`string` The associate form of the underlying input element.
`id`	—	`string` A stable id for the dynamic input. Svelte hooks cannot call `$props.id()`. Components should pass the id generated at the component's top level; `Dynamic.Root` does this automatically.
`ids`	—	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> \| undefined` The ids of the elements in the tags input. Useful for composition.
`inputValue`	—	`string` The tag input's value
`invalid`	—	`false \| true` Whether the tags input is invalid
`max`	`Infinity`	`number` The max number of tags
`maxLength`	—	`number` The max length of the input.
`name`	—	`string` The name attribute for the input. Useful for form submissions
`onFocusOutside`	—	`((event: FocusOutsideEvent) => void) \| undefined` Function called when the focus is moved outside the component
`onHighlightChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").DynamicHighlightChangeDetails) => void` Callback fired when a tag is highlighted by pointer or keyboard navigation
`onInputValueChange`	—	`((details: InputValueChangeDetails) => void) \| undefined` Callback fired when the input value is updated
`onInteractOutside`	—	`((event: InteractOutsideEvent) => void) \| undefined` Function called when an interaction happens outside the component
`onPointerDownOutside`	—	`((event: PointerDownOutsideEvent) => void) \| undefined` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").DynamicValueChangeDetails) => void` Callback fired when the tag values is updated
`onValueInvalid`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").DynamicValidityChangeDetails) => void` Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`readOnly`	—	`false \| true` Whether the tags input should be read-only
`required`	—	`false \| true` Whether the tags input is required
`translations`	—	`IntlTranslations \| undefined` Specifies the localized strings that identifies the accessibility elements and their states
`validate`	—	`((details: ValidateArgs) => boolean) \| undefined` Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`value`	—	`string[]` The tag values

ClearTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseDynamicReturn]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

HiddenInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`index*`	—	`number`
`value*`	—	`string`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`disabled`	—	`false \| true`

ItemContext

Prop	Default	Type
`render*`	—	`Snippet<[UseDynamicItemContext]>`

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemPreview

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseDynamicReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`