תווית

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

ה-label מכנה בקרת טופס — חברו אותו ל-id של הבקרה, ולחיצות על הטקסט ממקדות או מחליפות את השדה. הווריאנט הזה הוא אלמנט <label> מקורי מעוצב בלי תלות בפרימיטיב, בגופן הכותרות הנאו-ברוטליסטי.

השתמשו בו כש:

• בקרות עצמאיות — checkbox, switch או radio group בודדים שלא מצדיקים Field מלא: תיבות הסכמה, מתגי התראות.
• שורות הגדרות — זוגות switch-plus-label שבהם כל הכיתוב הוא יעד לחיצה.
• פריסות טופס מותאמות — רשתות וסידורים בשורה שבהם המבנה הערום של 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.