Pular para o conteúdo
Faculdade PhorteDesign System

Label

Em andamento

Rótulo de campo de formulário, em caixa alta pequena, com os estados que um rótulo precisa: obrigatório, opcional, com erro, desabilitado e com uma linha de ajuda.

Função
Formulário e ação
Também chamado de
rótulo, label, legenda do campo
Mora em
app/components/atoms/Label.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Obrigatório
  3. Opcional
  4. Com erro
  5. Desabilitado
  6. Com ajuda
  7. Num formulário
  8. Legenda do asterisco

Quando usar

Para rotular um campo quando o FormField não serve — um controle composto, ou um layout que separa rótulo e campo.

Faça

  • Ligue ao campo por htmlFor — é o que faz o clique no rótulo focar o campo e o leitor ler o nome.
  • Use opcional quando quase tudo for obrigatório, e required quando quase tudo for opcional.
  • Aponte o aria-describedby do campo para a ajuda: passe idDaAjuda, ou use o id que o Label gera sozinho (E59).
  • Com asterisco, ponha uma vez a LegendaDeObrigatorio ("* indica campo obrigatório") no topo do formulário.
  • Use as="legend" para o título de um grupo — é o que o FormField em fieldset e o RadioGroup fazem.

Evite

  • Usar estado="desabilitado" solto, sem campo disabled ligado: o texto esmaecido fica abaixo de 4,5:1 e só é isento quando faz parte de um controle inativo.
  • Marcar required e opcional juntos — o tipo não deixa (E59).
  • Rótulo longo: ele é caixa alta de 12px (text-rotulo), feito para duas ou três palavras.

Quando não usar. No caso comum, use o FormField: ele já traz o Label, liga o htmlFor e passa o estado de erro. No Checkbox, no Radio e no Toggle o rótulo já vem pela prop label.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Ícone de erro — Só com `estado="erro"`, antes do texto.
  2. Texto — 12px (`text-rotulo`, o piso do sistema), negrito, caixa alta, espaçamento largo, entrelinha de texto.
  3. Marca — Asterisco vermelho (`required`) ou "(opcional)" em caixa normal.
  4. Ajuda — Linha embaixo, com ícone de informação, em `text-xs`.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoTexto --muted-foreground.
ObrigatórioAsterisco vermelho, escondido do leitor, e "(obrigatório)" só para o leitor.
Opcional"(opcional)" escrito, em cinza e caixa normal.
Erroestado="erro": texto vermelho de interface e ícone de alerta.
Desabilitadoestado="desabilitado": 70% de opacidade e cursor proibido.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique no rótuloFoca o campo ligado por htmlFor — é um <label> nativo.
Com `ajuda`O rótulo e a ajuda passam a vir num invólucro em coluna; a ajuda recebe o idDaAjuda.

Relacionados