跳到内容
1.6k

标签

用于输入框、复选框、开关和单选按钮组的标签——点击可激活控件，采用新粗野主义风格的标题字体。

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

Label 为表单控件提供标题——与控件的 id 配对后，点击文字即可聚焦或切换该字段。此变体是样式化的原生 <label> 元素，无基元依赖，并采用新粗野主义的标题字体。

适合以下场景：

  • 独立控件——单个复选框、开关或单选组，不必上完整 Field：同意勾选、通知开关。
  • 设置行——开关加标签的组合，整段标题都是点击目标。
  • 自定义表单布局——网格与行内排布，Field 的堆叠结构放不下时。

安装

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
npx shadcn@latest add https://neobrutalism.com/r/base/label.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/label.json

安装以下依赖：

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

将以下代码复制并粘贴到您的项目中。

components/ui/label.tsx
"use client"

import * as React from "react"
import { Label as LabelPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-head font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }

更新导入路径以匹配您的项目结构。

用法

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>

Field 中的 Label

对于表单字段，请使用 Field 组件，它内置了 FieldLabel、FieldDescription 和 FieldError 组件。

<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {

RTL

若要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

无障碍

Label 渲染原生 <label> 元素：把 htmlFor 与控件的 id 对应（或把控件嵌在 label 内），屏幕阅读器会把这段文字播报为控件的可访问名称，点击标签也会聚焦或切换控件。样式含 select-none，因此双击标签不会选中文字。<label> 只与表单控件关联——对自定义小组件，请改用 aria-labelledby 指向 label 的 id。

API 参考

更多信息请参阅 Base UI 文档。