Visão geral

O Label é um componente simples que estiliza e padroniza os rótulos de campos de formulário.

Com diferentes tipos de input

Nome completo

E-mail

Aceito os termos

Campo desabilitado

Import

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

Nota

Para a maioria dos formulários, use o componente Field que já inclui Label, description e error state. Use Label diretamente apenas quando precisar de um rótulo standalone.

Padrão de implementação

Como usar Label em diferentes contextos de formulário.

Label com Input

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

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email">E-mail</Label>
  <Input id="email" type="email" />
</div>

Label obrigatório

<div className="flex flex-col gap-1.5">
  <Label htmlFor="nome">
    Nome
    <span className="ml-1 text-destructive" aria-hidden>*</span>
  </Label>
  <Input id="nome" required />
</div>

Label com ícone

<Label htmlFor="senha" className="flex items-center gap-1.5">
  <LockIcon className="size-3.5" />
  Senha
</Label>
<Input id="senha" type="password" />

Props e uso

O Label aceita todas as props nativas do elemento label HTML.

Props principais

htmlFor

string

ID do input ao qual o label está associado. Essencial para acessibilidade.

className

string

Classes adicionais.

children

ReactNode

Texto do label. Aceita ícones e elementos inline.

Acessibilidade

Sempre use htmlFor com o mesmo valor do id do input para associação correta.

O Label já inclui peer-disabled:opacity-50 para reduzir a opacidade quando o input associado está desabilitado.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter