72Commencer
HextaUI

Label

Un label qui suit son contrôle, s'atténue quand il est désactivé et le marque tout seul comme obligatoire ou facultatif.

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

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Utilisation

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

Faites pointer htmlFor vers l'id d'un contrôle, ou entourez le contrôle. Dans les deux cas, le label le retrouve et suit son état. Dans un <Field />, utilisez <FieldLabel />, qui câble l'id pour vous.

Exemples

Suit son contrôle

Le label s'atténue et affiche un curseur not-allowed tant que son contrôle est désactivé, et expose data-required, data-invalid et data-readonly pour vos propres styles. Il reste synchronisé quand le contrôle change.

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

Requis et facultatif

indicator="optional" signale les contrôles sans required, et indicator="required" ajoute un astérisque à ceux qui l'ont. La marque est masquée aux lecteurs d'écran, qui annoncent déjà les champs obligatoires.

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

Entourez une case à cocher pour que tout le label la bascule, ou placez le label à côté avec htmlFor. Une case à cocher désactivée atténue son label dans les deux cas.

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

Icône

Les icônes dans un label sont dimensionnées et atténuées pour s'accorder au texte.

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

Contenu long

Les longs labels passent à la ligne, et les chaînes sans espace sont coupées au lieu d'élargir la mise en page.

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

De droite à gauche

Les espacements et l'indicateur suivent le sens de lecture.

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

Accessibilité

  • Cliquer sur le label met le focus sur son contrôle ou le bascule : la zone cliquable est donc plus grande que le contrôle seul.
  • Un double-clic sur le texte du label ne le sélectionne pas. Les doubles-clics sur un contrôle à l'intérieur du label fonctionnent normalement.
  • Chaque contrôle doit avoir un nom. Sans label visible, utilisez plutôt aria-label sur le contrôle.

Référence de l’API

Rend un <label> et accepte ses attributs.

Label

PropTypePar défaut
htmlForL'id du contrôle. Omettez-le quand le label entoure le contrôle.
string–
indicatorMarque le label d'après l'état obligatoire du contrôle. Désactivé par défaut.
"required" | "optional"–
optionalText
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
AttributDescription
data-slot="label"Cible les labels en CSS.
data-disabledPrésent tant que le contrôle est désactivé.
data-requiredPrésent tant que le contrôle est obligatoire.
data-invalidPrésent tant que le contrôle est invalide, après une interaction de l'utilisateur ou quand aria-invalid est défini.
data-readonlyPrésent tant que le contrôle est en lecture seule.
data-slot="label-indicator"La marque obligatoire ou facultatif.

Voir aussi

Utilisé dans les blocks

Des blocks qui s’appuient sur Label.