标签输入

Alpha

标签输入在输入框中渲染标签，后面跟着一个实际的文本输入框。

苹果

香蕉

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'

const modelValue = ref(['Apple', 'Banana'])
</script>

<template>
  <TagsInputRoot
    v-model="modelValue"
    class="flex gap-2 items-center border p-2 rounded-lg w-full max-w-[480px] flex-wrap border-blackA7 bg-white"
  >
    <TagsInputItem
      v-for="item in modelValue"
      :key="item"
      :value="item"
      class="text-white flex shadow-md items-center justify-center gap-2 bg-green8 aria-[current=true]:bg-green9 rounded p-1"
    >
      <TagsInputItemText class="text-sm pl-1" />
      <TagsInputItemDelete class="p-0.5 rounded bg-transparent hover:bg-blackA4">
        <Icon icon="lucide:x" />
      </TagsInputItemDelete>
    </TagsInputItem>

    <TagsInputInput
      placeholder="Fruits..."
      class="text-sm focus:outline-none flex-1 rounded text-green9 bg-transparent placeholder:text-mauve9 px-1"
    />
  </TagsInputRoot>
</template>

功能

可以是受控的或不受控的。
完整的键盘导航。
限制标签数量。
接受来自剪贴板的值。
清除按钮以重置所有标签值。

安装

从命令行安装组件。

$ npm add radix-vue

解剖

导入所有部分并将它们组合在一起。

vue

<script setup>
import { TagsInputClear, TagsInputDelete, TagsInputInput, TagsInputItem, TagsInputRoot, TagsInputText } from 'radix-vue'
</script>

<template>
  <TagsInputRoot>
    <TagsInputItem>
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>

    <TagsInputInput />
    <TagsInputClear />
  </TagsInputRoot>
</template>

API 参考

根

包含所有标签输入组件部分。

道具	默认	类型
`addOnBlur`		`布尔值` 当 `true` 时，允许在失焦输入时添加标签
`addOnPaste`		`布尔值` 当 `true` 时，允许粘贴时添加标签。与分隔符道具结合使用。
`addOnTab`		`布尔值` 当 `true` 时，允许在 Tab 键按下时添加标签
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`convertValue`		`((value: string) => AcceptableInputValue)` 将输入值转换为所需类型。在将对象用作值并使用 `TagsInputInput` 时是强制性的
`defaultValue`	`[]`	`AcceptableInputValue[]` 应添加的标签的值。当您不需要控制标签输入状态时使用
`delimiter`	`','`	`字符串` 触发添加新标签的字符。还用于将 `@paste` 事件的标签拆分
`dir`		`'ltr' \| 'rtl'` 组合框的阅读方向（如果适用）。如果省略，则从 `ConfigProvider` 全局继承或假设 LTR（从左到右）阅读模式。
`disabled`		`布尔值` 当 `true` 时，阻止用户与标签输入交互。
`displayValue`	`value.toString()`	`((value: AcceptableInputValue) => string)` 显示标签的值。当您想对值应用修改（例如添加后缀）或使用对象作为值时很有用
`duplicate`		`布尔值` 当 `true` 时，允许重复标签。
`id`		`字符串`
`max`	`0`	`数字` 标签的最大数量。
`modelValue`		`AcceptableInputValue[]` 标签输入的受控值。可以绑定为 `v-model`。
`name`		`字符串` 作为名称/值对的一部分，与拥有表单一起提交的标签输入的名称。
`required`		`布尔值` 当 `true` 时，表示用户必须在拥有表单提交之前添加标签输入。

发射	有效载荷
`invalid`	`[payload: AcceptableInputValue]` 当值无效时调用的事件处理程序
`update:modelValue`	`[payload: AcceptableInputValue[]]` 当值更改时调用的事件处理程序

插槽（默认）	有效载荷
`modelValue`	`字符串 \| Record<string, any>` 当前输入值

数据属性	价值
`[data-disabled]`	禁用时出现
`[data-focused]`	在输入上聚焦时出现
`[data-invalid]`	当输入值无效时出现

项目

包含标签的组件。

道具	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`disabled`		`布尔值` 当 `true` 时，阻止用户与标签输入交互。
`value*`		`字符串 \| Record<string, any>` 与标签关联的值

数据属性	价值
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	禁用时出现

ItemText

标签的文本部分。对无障碍性很重要。

道具	默认	类型
`as`	`'span'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。

ItemDelete

删除关联标签的按钮。

道具	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。

数据属性	价值
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	禁用时出现

输入

标签输入的输入元素。

道具	默认	类型
`as`	`'input'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`autoFocus`		`布尔值` 在安装时将焦点放在元素上。
`maxLength`		`数字` 允许的最大字符数。
`placeholder`		`字符串` 用于空标签输入的占位符字符。

数据属性	价值
`[data-invalid]`	当输入值无效时出现

清除

删除所有标签的按钮。

道具	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。

数据属性	价值
`[data-disabled]`	禁用时出现

示例

与组合框一起

您可以将标签输入与组合框组合在一起。

苹果

vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'

const searchTerm = ref('')
const values = ref(['Apple'])
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']

watch(values, () => {
  searchTerm.value = ''
}, { deep: true })
</script>

<template>
  <ComboboxRoot
    v-model="values"
    v-model:search-term="searchTerm"
    multiple
    class="my-4 mx-auto relative"
  >
    <ComboboxAnchor class="w-[400px] inline-flex items-center justify-between rounded-lg p-2 text-[13px] leading-none  gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
      <TagsInputRoot
        v-slot="{ modelValue: tags }"
        :model-value="values"
        delimiter=""
        class="flex gap-2 items-center rounded-lg flex-wrap"
      >
        <TagsInputItem
          v-for="item in tags"
          :key="item"
          :value="item"
          class="flex items-center justify-center gap-2 text-white bg-grass8 aria-[current=true]:bg-grass9 rounded px-2 py-1"
        >
          <TagsInputItemText class="text-sm" />
          <TagsInputItemDelete>
            <Icon icon="lucide:x" />
          </TagsInputItemDelete>
        </TagsInputItem>

        <ComboboxInput as-child>
          <TagsInputInput
            placeholder="Fruits..."
            class="focus:outline-none flex-1 rounded !bg-transparent  placeholder:text-mauve10 px-1"
            @keydown.enter.prevent
          />
        </ComboboxInput>
      </TagsInputRoot>

      <ComboboxTrigger>
        <Icon
          icon="radix-icons:chevron-down"
          class="h-4 w-4 text-grass11"
        />
      </ComboboxTrigger>
    </ComboboxAnchor>
    <ComboboxContent class="absolute z-10 w-full mt-2 bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
      <ComboboxViewport class="p-[5px]">
        <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />

        <ComboboxGroup>
          <ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
            Fruits
          </ComboboxLabel>

          <ComboboxItem
            v-for="(option, index) in options"
            :key="index"
            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass8 data-[highlighted]:text-grass1"
            :value="option"
          >
            <ComboboxItemIndicator
              class="absolute left-0 w-[25px] inline-flex items-center justify-center"
            >
              <Icon icon="radix-icons:check" />
            </ComboboxItemIndicator>
            <span>
              {{ option }}
            </span>
          </ComboboxItem>
        </ComboboxGroup>
      </ComboboxViewport>
    </ComboboxContent>
  </ComboboxRoot>
</template>

粘贴行为

您可以通过传递 add-on-paste 道具在粘贴时自动添加标签。

vue

<script setup lang="ts">
import { TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot } from 'radix-vue'
</script>

<template>
  <TagsInputRoot
    v-model="modelValue"
    add-on-paste
  >
    …
  </TagsInputRoot>
</template>

无障碍性

键盘交互

钥匙	描述
`删除`	当标签处于活动状态时，将其删除并将右侧的标签设置为活动状态。
`退格`	当标签处于活动状态时，将其删除并将左侧的标签设置为活动状态。如果没有左侧的标签，则下一个标签或输入将获得焦点。
`向右箭头`	将下一个标签设置为活动状态。
`向左箭头`	将上一个标签设置为活动状态。
`主页`	将第一个标签设置为活动状态
`结束`	将最后一个标签设置为活动状态

标签输入 ​

功能 ​

安装 ​

解剖 ​

API 参考 ​

根 ​

项目 ​

ItemText ​

ItemDelete ​

输入 ​

清除 ​

示例 ​

与组合框一起 ​

粘贴行为 ​

无障碍性 ​

键盘交互 ​

标签输入

功能

安装

解剖

API 参考

根

项目

ItemText

ItemDelete

输入

清除

示例

与组合框一起

粘贴行为

无障碍性

键盘交互