Svelte Tags

A customizable tag input component that allows users to enter multiple tags, with support for keyboard navigation and tag deletion.

The Tags.svelte component is a flexible tag input field that lets users add and manage multiple tags. It supports adding tags with Enter, removing them with Backspace or close buttons, and offers customizable styling options. The component handles keyboard navigation and maintains a reactive array of tag values that can be bound to a parent component.

Setup #

Import the Tags component in a script tag.

  • Svelte
<script>
  import { Tags } from "flowbite-svelte";
</script>

Example #

  • Svelte
<script lang="ts">
  import { Button, Tags } from "flowbite-svelte";
  let tags: string[] = $state([]);
  const handleClick = () => {
    alert(`Submitted: ${tags}`);
  };
</script>

<form>
  <Tags class="mt-5 mb-3" bind:value={tags} />
  {#if tags.length > 0}
    <pre>{JSON.stringify(tags, null, 2)}</pre>
  {/if}
  <Button onclick={handleClick}>Submit</Button>
</form>

See also #

Loading related links...

Component data #

The component has the following props, type, and default values. See types page for type information.

StepIndicator