تسمية

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

تُستخدم التسمية لتعليق عنصر تحكم في النموذج — حيث تُقرن مع عنصر التحكم id الخاص به، وتؤدي النقرات على النص إلى تحديد الحقل أو تبديل حالته. هذا النوع هو نسخة مخصصة من <label> element الأصلي دون أي تبعيات أولية، ويتم عرضها بخط العناوين «نيوبروتالست».

استخدمه عندما:

• عناصر التحكم المستقلة — مربع اختيار منفرد، أو مفتاح تبديل، أو مجموعة خيارات لا تستدعي استخدام Field كامل: مربعات الموافقة، ومفاتيح تبديل الإشعارات.
• صفوف الإعدادات — أزواج من أزرار التبديل مع التسميات حيث يكون العنوان بأكمله هدفًا للنقر.
• تخطيطات النماذج المخصصة — الشبكات والترتيبات المضمنة التي لا تتناسب مع البنية المكدسة لـ 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 الخاص بعنصر التحكم (أو قم بتضمين عنصر التحكم داخل التسمية)، وستقوم برامج قراءة الشاشة بإعلان النص باعتباره الاسم الذي يمكن الوصول إليه لعنصر التحكم، بينما تؤدي النقرات على التسمية إلى تركيز التركيز عليها أو تبديلها. تتضمن الأنماط select-none، لذا فإن النقر المزدوج على التسمية لا يؤدي إلى تحديد نصها. يرتبط <label> بعناصر التحكم في النماذج فقط — بالنسبة للأدوات المصغّرة المخصصة، قم بتوجيه aria-labelledby إلى id الخاص بالتسمية بدلاً من ذلك.

مرجع API#

لمزيد من المعلومات، راجع وثائق Base UI Label.