72Los geht’s
HextaUI

Label

Ein Label, das seinem Steuerelement folgt: Es dimmt, wenn es deaktiviert ist, und markiert es von selbst als erforderlich oder optional.

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

Installation

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

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Verwendung

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

Richte htmlFor auf die id eines Steuerelements oder umschließe das Steuerelement. In beiden Fällen findet das Label es und folgt seinem Zustand. Innerhalb eines <Field /> verwende <FieldLabel />, das die id für dich verdrahtet.

Beispiele

Folgt seinem Steuerelement

Das Label dimmt und zeigt einen not-allowed-Cursor, solange sein Steuerelement deaktiviert ist, und stellt data-required, data-invalid und data-readonly für eigene Styles bereit. Es bleibt aktuell, wenn sich das Steuerelement ändert.

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

Erforderlich und optional

indicator="optional" kennzeichnet Steuerelemente ohne required, und indicator="required" fügt Steuerelementen, die es haben, ein Sternchen hinzu. Die Markierung ist für Screenreader ausgeblendet, die Pflichtfelder bereits ansagen.

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

Umschließe eine Checkbox, damit das ganze Label sie umschaltet, oder platziere das Label per htmlFor daneben. Eine deaktivierte Checkbox dimmt ihr Label in beiden Fällen.

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

Icon

Icons in einem Label werden dimensioniert und abgedämpft, damit sie neben dem Text passen.

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

Langer Inhalt

Lange Labels umbrechen, und ununterbrochene Zeichenketten werden getrennt, statt das Layout zu verbreitern.

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

Rechts nach links

Abstände und der Indikator folgen der Leserichtung.

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

Barrierefreiheit

  • Ein Klick auf das Label fokussiert oder schaltet sein Steuerelement um und ist damit eine größere Klickfläche als das Steuerelement allein.
  • Ein Doppelklick auf den Label-Text markiert ihn nicht. Doppelklicks auf ein Steuerelement im Label funktionieren wie gewohnt.
  • Jedes Steuerelement braucht einen Namen. Ohne sichtbares Label nutze stattdessen aria-label am Steuerelement.

API-Referenz

Rendert ein <label> und akzeptiert dessen Attribute.

Label

PropTypStandard
htmlForDie id des Steuerelements. Lass sie weg, wenn das Label das Steuerelement umschließt.
string–
indicatorMarkiere das Label anhand des Required-Zustands des Steuerelements. Standardmäßig aus.
"required" | "optional"–
optionalText
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
AttributBeschreibung
data-slot="label"Labels per CSS ansprechen.
data-disabledVorhanden, solange das Steuerelement deaktiviert ist.
data-requiredVorhanden, solange das Steuerelement erforderlich ist.
data-invalidVorhanden, solange das Steuerelement ungültig ist, nach einer Interaktion oder wenn aria-invalid gesetzt ist.
data-readonlyVorhanden, solange das Steuerelement schreibgeschützt ist.
data-slot="label-indicator"Die Markierung für erforderlich oder optional.

Verwandt

In Blocks verwendet

Blocks, die auf Label aufbauen.