标签

呈现与控件关联的可访问标签。

名字

<script setup lang="ts">
import { Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-[15px] px-5">
    <Label
      class="text-[15px] font-semibold leading-[35px] text-white"
      for="firstName"
    > First name </Label>
    <input
      id="firstName"
      class="bg-blackA5 shadow-blackA9 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA9"
      type="text"
      value="Pedro Duarte"
    >
  </div>
</template>

功能

• 双击标签时会阻止文本选择。
• 支持嵌套控件。

安装

从命令行安装组件。

$ npm add radix-vue

解剖学

导入组件。

<script setup>
import { Label } from 'radix-vue'
</script>

<template>
  <Label />
</template>

API 参考

根

包含标签的内容。

道具	默认	类型
as	'label'	AsTag | 组件 此组件应呈现为的元素或组件。 可以被 asChild 覆盖
asChild		布尔值 将默认呈现的元素更改为作为子元素传递的元素，合并它们的道具和行为。 阅读我们的 组合 指南以获取更多详细信息。
for		字符串 与标签关联的元素的 id。

无障碍性

此组件基于本机 label 元素，它会在包装控件或使用 for 属性时自动应用正确的标签。 为了使您自己的自定义控件正常工作，请确保它们使用本机元素（如 button 或 input）作为基础。