72Başlayın
HextaUI

Label

Denetimini izleyen bir etiket: denetim devre dışıyken solar, zorunlu veya isteğe bağlı olduğunu kendiliğinden belirtir.

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

export function LabelDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-demo-email" indicator="required">
          Email
        </Label>
        <Input
          id="label-demo-email"
          type="email"
          autoComplete="email"
          required
        />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-demo-team" indicator="required">
          Team
        </Label>
        <Input id="label-demo-team" defaultValue="Design systems" disabled />
      </div>
      <Label>
        <Checkbox defaultChecked />
        Send me product updates
      </Label>
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/label.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

htmlFor değerini bir denetimin id'sine yöneltin veya denetimi sarmalayın. Her iki durumda da etiket denetimi bulur ve durumunu izler. Bir <Field /> içinde id'yi sizin için bağlayan <FieldLabel /> kullanın.

Örnekler

Denetimini izler

Denetimi devre dışıyken etiket solar ve izin verilmiyor imleci gösterir; kendi stilleriniz için data-required, data-invalid ve data-readonly sunar. Denetim değiştiğinde ona ayak uydurur.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelStates() {
  const [locked, setLocked] = React.useState(true)

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-states-domain">Custom domain</Label>
        <Input
          id="label-states-domain"
          defaultValue="docs.example.com"
          disabled={locked}
        />
      </div>
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setLocked(!locked)}
      >
        {locked ? "Unlock" : "Lock"}
      </Button>
    </div>
  )
}

Zorunlu ve isteğe bağlı

indicator="optional" required olmayan denetimleri etiketler, indicator="required" ise olanlara yıldız ekler. İşaret, zorunlu alanları zaten duyuran ekran okuyuculardan gizlenir.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelIndicator() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-name" indicator="optional">
          Full name
        </Label>
        <Input id="label-indicator-name" autoComplete="name" required />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-company" indicator="optional">
          Company
        </Label>
        <Input id="label-indicator-company" autoComplete="organization" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-card" indicator="required">
          Card number
        </Label>
        <Input id="label-indicator-card" inputMode="numeric" required />
      </div>
    </div>
  )
}

Checkbox

Bir onay kutusunu sarmalayın ki tüm etiket onu açıp kapatsın ya da etiketi htmlFor ile yanına yerleştirin. Devre dışı bir onay kutusu her iki durumda da etiketini soluklaştırır.

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

export function LabelCheckbox() {
  return (
    <div className="flex flex-col gap-4">
      <Label>
        <Checkbox defaultChecked />
        Email me when someone replies
      </Label>
      <Label>
        <Checkbox disabled />
        Weekly digest (coming soon)
      </Label>
      <div className="flex items-center gap-2">
        <Checkbox id="label-checkbox-terms" />
        <Label htmlFor="label-checkbox-terms">Accept the terms</Label>
      </div>
    </div>
  )
}

Simge

Etiket içindeki simgeler metnin yanına oturacak şekilde boyutlandırılır ve soluklaştırılır.

import { IconLock } from "@tabler/icons-react"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelIcon() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="label-icon-key">
        <IconLock aria-hidden="true" />
        API key
      </Label>
      <Input id="label-icon-key" defaultValue="sk_live_51H…" readOnly />
    </div>
  )
}

Uzun içerik

Uzun etiketler sarar, bölünmeyen dizeler düzeni genişletmek yerine kırılır.

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

export function LabelLongContent() {
  return (
    <div className="flex w-64 max-w-full flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-long" indicator="optional">
          Where should we send invoices for the international subsidiary
        </Label>
        <Input id="label-long" />
      </div>
      <Label>
        <Checkbox />
        billing-notifications@an-extremely-long-company-domain.example.com
      </Label>
    </div>
  )
}

Sağdan sola

Boşluklar ve gösterge okuma yönünü izler.

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

export function LabelRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label
          htmlFor="label-rtl-name"
          indicator="optional"
          optionalText="اختياري"
        >
          الاسم
        </Label>
        <Input id="label-rtl-name" />
      </div>
      <Label>
        <Checkbox defaultChecked />
        تذكرني
      </Label>
    </div>
  )
}

Erişilebilirlik

  • Etikete tıklamak denetimine odaklanır veya onu açıp kapatır, bu yüzden denetimin tek başına olduğundan daha büyük bir hedeftir.
  • Etiket metnine çift tıklamak onu seçmez. Etiketin içindeki bir denetime çift tıklama her zamanki gibi çalışır.
  • Her denetimin bir adı olmalıdır. Görünür etiket yoksa bunun yerine denetimde aria-label kullanın.

API referansı

Bir <label> işler ve onun niteliklerini kabul eder.

Label

PropTürVarsayılan
htmlForDenetimin id'si. Etiket denetimi sarmalıyorsa belirtmeyin.
string–
indicatorEtiketi denetimin zorunlu durumundan işaretleyin. Varsayılan olarak kapalıdır.
"required" | "optional"–
optionalText
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
ÖznitelikAçıklama
data-slot="label"CSS'te etiketleri hedefler.
data-disabledDenetim devre dışıyken bulunur.
data-requiredDenetim zorunluyken bulunur.
data-invalidDenetim geçersizken, kullanıcı etkileşiminden sonra veya aria-invalid ayarlandığında bulunur.
data-readonlyDenetim salt okunurken bulunur.
data-slot="label-indicator"Zorunlu veya isteğe bağlı işareti.

İlgili

Kullanıldığı bloklar

Label üzerine kurulan bloklar.