集成 Label UI 组件

一个灵活的标签组件，为表单标签和 UI 元素标签提供一致的排版，并具有智能交互处理，防止不必要的文本选中。

安装

您可以通过 Tiptap CLI 添加该基础组件

npx @tiptap/cli@latest add label

用法

import { Label } from '@/components/tiptap-ui-primitive/label'

export default function MyComponent() {
  return (
    <div>
      {/* 基础 Label，默认渲染为 div */}
      <Label>部分标题</Label>

      {/* 作为 HTML label 元素的 Label */}
      <Label as="label" htmlFor="email">
        电子邮箱地址
      </Label>

      {/* 带自定义样式的 Label */}
      <Label className="text-blue-600">自定义样式标签</Label>

      {/* 带点击事件的 Label */}
      <Label as="label" htmlFor="terms" onClick={() => console.log('标签被点击')}>
        条款和条件
      </Label>
    </div>
  )
}

属性

Label

一个灵活的标签组件，可以渲染为 label 或 div 元素。

名称	类型	默认值	说明
as	`"label" \| "div"`	`"div"`	渲染的 HTML 元素

Previously输入框

Next up菜单