برچسب

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

Label یک کنترل فرم را عنوان می‌کند — با id کنترل جفتش کنید تا کلیک روی متن فیلد را فوکوس یا toggle کند. این variant یک عنصر بومی استایل‌شدهٔ <label> بدون وابستگی primitive است، با فونت heading نئوبروتالیستی.

برای این موارد از آن استفاده کنید:

• کنترل‌های مستقل — چک‌باکس، switch یا گروه radio تنها که Field کامل نمی‌خواهد: کادر رضایت، toggle اعلان.
• ردیف تنظیمات — جفت switch-plus-label جایی که کل caption هدف کلیک است.
• چیدمان سفارشی فرم — شبکه و آرایش درون‌خطی جایی که ساختار stackedِ Field جا نمی‌شود.

نصب#

pnpmnpmyarnbun
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
کپی

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
کپی

"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>

Label در Field#

برای فیلدهای فرم، از کامپوننت 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#

برای فعال‌سازی پشتیبانی RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.

"use client"

import * as React from "react"

دسترسی‌پذیری#

Label یک عنصر بومی <label> رندر می‌کند: htmlFor را با id کنترل جور کنید (یا کنترل را داخل label بگذارید) تا صفحه‌خوان متن را به‌عنوان نام دسترس‌پذیر کنترل اعلام کند و کلیک روی label آن را فوکوس یا toggle کند. استایل‌ها شامل select-noneاند تا دوبارکلیک متن label را انتخاب نکند. <label> فقط با کنترل‌های فرم مرتبط می‌شود — برای ویجت‌های سفارشی به‌جای آن aria-labelledby را به id برچسب اشاره دهید.

مرجع API#

برای اطلاعات بیشتر، مستندات Base UI Label را ببینید.