72Começar
HextaUI

Label

Um rótulo que acompanha seu controle, escurecendo quando ele está desabilitado e marcando-o como obrigatório ou opcional por conta própria.

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

Instalação

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

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Uso

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

Aponte htmlFor para o id de um controle, ou envolva o controle. De qualquer forma o rótulo o encontra e acompanha seu estado. Dentro de um <Field />, use <FieldLabel />, que configura o id para você.

Exemplos

Acompanha seu controle

O rótulo escurece e mostra o cursor not-allowed enquanto seu controle está desabilitado, e expõe data-required, data-invalid e data-readonly para seus próprios estilos. Ele acompanha as mudanças do controle.

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

Obrigatório e opcional

indicator="optional" marca os controles sem required, e indicator="required" adiciona um asterisco aos controles que o têm. A marca fica oculta dos leitores de tela, que já anunciam os campos obrigatórios.

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

Envolva um checkbox para que o rótulo inteiro o alterne, ou coloque o rótulo ao lado dele com htmlFor. Um checkbox desabilitado escurece seu rótulo de qualquer forma.

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

Ícone

Os ícones dentro de um rótulo são dimensionados e atenuados para ficar ao lado do texto.

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

Conteúdo longo

Rótulos longos quebram linha, e strings sem quebras são quebradas em vez de alargar o layout.

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

Da direita para a esquerda

Os espaçamentos e o indicador seguem a direção de leitura.

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

Acessibilidade

  • Clicar no rótulo foca ou alterna seu controle, então ele é uma área de clique maior que o controle sozinho.
  • Clicar duas vezes no texto do rótulo não o seleciona. Cliques duplos em um controle dentro do rótulo funcionam normalmente.
  • Todo controle precisa de um nome. Quando não há rótulo visível, use aria-label no controle.

Referência da API

Renderiza um <label> e aceita seus atributos.

Label

PropTipoPadrão
htmlForO id do controle. Omita quando o rótulo envolve o controle.
string–
indicatorMarque o rótulo a partir do estado obrigatório do controle. Desativado por padrão.
"required" | "optional"–
optionalText
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
AtributoDescrição
data-slot="label"Seleciona os rótulos no CSS.
data-disabledPresente enquanto o controle está desabilitado.
data-requiredPresente enquanto o controle é obrigatório.
data-invalidPresente enquanto o controle é inválido, depois que o usuário interagiu ou quando aria-invalid está definido.
data-readonlyPresente enquanto o controle é somente leitura.
data-slot="label-indicator"A marca de obrigatório ou opcional.

Relacionados

Usado em blocos

Blocos que se baseiam em Label.