Lzh on GitHub

Label

呈现与控件相关的可访问标签。
<script setup lang="ts">
import { Label } from 'reka-ui'
</script>

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

特性 (Features)

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

安装 (Installation)

从命令行安装组件。

$ npm add reka-ui

解剖 (Anatomy)

导入组件。

<script setup>
import { Label } from 'reka-ui'
</script>

<template>
  <Label />
</template>

API 参考 (API Reference)

根 (Root)

包含标签的内容。

属性默认值类型描述
as'label'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
forstring标签关联元素的 ID。

可访问性 (Accessibility)

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