लेबल

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

लेबल फ़ॉर्म कंट्रोल का कैप्शन है — कंट्रोल की id से जोड़ें, और टेक्स्ट पर क्लिक फ़ील्ड फ़ोकस या टॉगल करता है। यह वैरिएंट स्टाइल किया नेटिव <label> एलिमेंट है, कोई प्रिमिटिव डिपेंडेंसी नहीं, नियोब्रूटलिस्ट हेडिंग फ़ॉन्ट में।

इसे इन स्थितियों में चुनें:

• स्टैंडअलोन कंट्रोल — अकेला चेकबॉक्स, स्विच या रेडियो ग्रुप जहाँ पूरा 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>

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 से मिलाएँ (या कंट्रोल को लेबल के अंदर रखें) और स्क्रीन रीडर टेक्स्ट को कंट्रोल का accessible name घोषित करते हैं, जबकि लेबल पर क्लिक फ़ोकस या टॉगल करता है। स्टाइल में select-none है, इसलिए लेबल पर डबल-क्लिक टेक्स्ट नहीं चुनता। <label> सिर्फ़ फ़ॉर्म कंट्रोल से जुड़ता है — कस्टम विजेट के लिए aria-labelledby को लेबल की id पर इंगित करें।

API रेफ़रेंस#

अधिक जानकारी के लिए Base UI Label दस्तावेज़ देखें.