Label
Nomeia um campo de formulário e descreve qual informação se espera preencher nele.
- Nomear um campo de texto: identificar qual informação um Input espera receber, para que a pessoa entenda o que preencher antes de fazê-lo. Ex.: "Título SEO", "Descrição", "Texto alternativo".
- Nomear um campo de seleção: identificar a pergunta ou opção que um Select resolve. Ex.: "Motivo da rejeição", "Qual é o motivo do cancelamento?".
- Reforçar o nome do campo com um esclarecimento breve: somar um ícone com um Tooltip quando o campo precisar de uma precisão curta antes de ser preenchido, em vez de estender o texto do label. Ex.: um ícone de ajuda ao lado de "Tamanho da página".
- Nomear uma opção de Checkbox ou Radio button: ambos os controles já incluem seu próprio rótulo através da prop label; envolvê-los em um Label duplica a rotulagem. Em vez disso, usar a prop label do Checkbox ou do Radio.
- Mostrar texto de ajuda ou instruções adicionais: o Label é um rótulo curto, não o lugar para instruções extensas abaixo de um campo. Em vez disso, usar helpText do padrão Form Field.
- Comunicar um erro de validação: o Label não muda de aparência para sinalizar um erro. Em vez disso, usar a aparência danger do padrão Form Field.
- Text: conteúdo textual que identifica o campo, descrevendo qual informação se espera preencher.
- Icon: elemento opcional adicionado após o texto, geralmente envolvido em um Tooltip, para somar um esclarecimento breve sem estender o label.
Visible (default): rótulo visível na tela; usar na maioria dos campos para que qualquer pessoa identifique qual informação se espera. Ex.: "Título SEO", "Descrição".
Hidden (hidden): oculta visualmente o texto, mas o mantém disponível para leitores de tela; reservar para campos cujo propósito já é evidente pelo contexto visual (um ícone, um placeholder claro), mas que ainda precisam de um rótulo acessível. Ex.: um campo de busca com ícone de lupa e sem rótulo visível.
O Label aparece logo antes ou ao lado do campo que nomeia: dentro de um grupo de um formulário, um filtro ou uma seção de configuração, sempre associado a um Input ou a um Select através de htmlFor.
Nomear o campo com o que se espera preencher, em poucas palavras e de forma concreta.
Evitar labels genéricos que não descrevem qual informação o campo espera.
Quando o campo precisa de um esclarecimento breve, somar o ícone com Tooltip em vez de estender o texto do label.
Evitar estender o texto do label com o esclarecimento completo em vez de usar o ícone de ajuda.
- Vínculo com o campo: usar htmlFor com o mesmo valor do id do campo, para que um clique no Label foque o campo e as tecnologias assistivas anunciem o rótulo ao chegar nele.
- Rótulo sempre presente, mesmo que não seja visível: usar hidden em vez de omitir o Label; o texto continua disponível para leitores de tela mesmo que não apareça na tela.
- Ícone que reforça a mensagem: quando o Label inclui um ícone de ajuda, o texto já identifica o campo por si só; o ícone com Tooltip complementa essa informação, não a substitui.
Instale o componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Label } from "@nimbus-ds/components";
const Example: React.FC = () => <Label>Título SEO</Label>;
export default Example;As propriedades adicionais são passadas ao elemento <label>. Consulte a documentação do elemento label para ver a lista de atributos aceitos.
- Input — Recebe o rótulo do Label para identificar o campo de texto.
- Select — Recebe o rótulo do Label para identificar a opção a escolher.
- Form Field — Combina label, campo e texto de ajuda em um único bloco de formulário.
- Tooltip — Para adicionar um esclarecimento breve ao lado do ícone do Label.
Label
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the label. | |
htmlFor | string | The for attribute specifies which form element a label is bound to. | |
hidden | boolean | 'false' | If true the label will be visually hidden but maintain accessibility purpose |
Label.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.