TagsInput experimental

Ark UI TagsInput 기반 wrapper입니다. 토큰을 입력해 태그 목록을 편집하는 입력 컨트롤의 anatomy를 제공합니다.

@ark-ui/svelte/tags-input Ark UI docs ↗

관심 프레임워크

Svelte

React

<script lang="ts">
  import * as TagsInput from '@odbd/svelte/tags-input'

  let value = $state(['Svelte', 'React'])
</script>

<TagsInput.Root
  {value}
  onValueChange={(details: { value: string[] }) => (value = details.value)}
  style="max-width: 20rem;"
>
  <TagsInput.Label>관심 프레임워크</TagsInput.Label>
  <TagsInput.Control>
    {#each value as tag, index}
      <TagsInput.Item {index} value={tag}>
        <TagsInput.ItemPreview>
          <TagsInput.ItemText>{tag}</TagsInput.ItemText>
          <TagsInput.ItemDeleteTrigger>×</TagsInput.ItemDeleteTrigger>
        </TagsInput.ItemPreview>
        <TagsInput.ItemInput />
      </TagsInput.Item>
    {/each}
    <TagsInput.Input placeholder="태그를 입력하세요" />
    <TagsInput.ClearTrigger>지우기</TagsInput.ClearTrigger>
  </TagsInput.Control>
  <TagsInput.HiddenInput />
</TagsInput.Root>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as TagsInput from '@odbd/svelte/tags-input'

import { TagsInput } from '@odbd/react/tags-input'