Etiket

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

Label, bir form kontrolüne başlık ekler — kontrolün id değeriyle eşleştirin; metne yapılan tıklamalar alanı odaklar veya durumunu değiştirir. Bu varyant, primitif bağımlılığı olmayan, stillendirilmiş yerel bir <label> öğesidir ve neobrütalist başlık yazı tipiyle dizilmiştir.

Şu durumlarda tercih edin:

• Bağımsız kontroller — tam bir Field gerektirmeyen tek başına bir onay kutusu, anahtar veya radyo grubu: izin kutuları, bildirim anahtarları.
• Ayar satırları — başlığın tamamının tıklama hedefi olduğu anahtar-etiket çiftleri.
• Özel form düzenleri — Field bileşeninin dikey yapısının uymadığı ızgara ve satır içi yerleşimler.

Kurulum#

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
Kopyala

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Kopyala

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

Kullanım#

Kopyalaimport { Label } from "@/components/ui/label"

Kopyala<Label htmlFor="email">Your email address</Label>

Field İçinde Label#

Form alanları için, yerleşik FieldLabel, FieldDescription ve FieldError bileşenlerini içeren Field bileşenini kullanın.

Kopyala<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'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Label, yerel bir <label> öğesi işler: htmlFor değerini kontrolün id değeriyle eşleştirin (veya kontrolü etiketin içine yerleştirin); ekran okuyucular metni kontrolün erişilebilir adı olarak duyurur, etikete yapılan tıklamalar ise kontrolü odaklar veya durumunu değiştirir. Stiller select-none içerir; böylece etikete çift tıklamak metnini seçmez. <label> yalnızca form kontrolleriyle ilişkilendirilir — özel bileşenler için bunun yerine aria-labelledby özniteliğini etiketin id değerine yönlendirin.

API Referansı#

Daha fazla bilgi için Base UI Label belgelerine bakın.