111k
新建

Label

PreviousNext

渲染一个与控件关联的、可访问的标签。

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

安装

pnpm dlx shadcn@latest add 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>
Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

更多信息请参见 Base UI Label 文档。