Label

Rótulo de campo de formulário. Associa-se ao input (for), sinaliza obrigatoriedade (mandatory) e aceita uma dica via slot #hint. Consome o DNA dos Fundamentos (02 Tipografia · label.lg, 01 Cor · content/feedback.error).

Componente Arrow

Este componente foi elevado ao padrão Arrow — reescrito sobre os Fundamentos, consumindo o DNA de tokens (cor, tipografia, forma, espaço, movimento) sem valor solto, com API limpa, acessibilidade e render validado. O selo no card confirma: virou Arrow de verdade.

Playground

Importação

import { Label } from '@arrow/components-vue'

Uso básico

Nome completo

<Label label="Nome completo" />

Campo obrigatório

mandatory exibe o asterisco (color.feedback.error). Sinalize também aria-required="true" no input.

Campo obrigatório*Campo opcional

<Label label="Campo obrigatório" mandatory />
<Label label="Campo opcional" />

Associado a um input · for

for recebe o id do campo — clicar no rótulo foca o input.

E-mail*

<Label label="E-mail" for="email-input" mandatory />
<input id="email-input" type="email" />

Dica · slot #hint

Use o slot #hint para uma ajuda contextual — um ícone, ou (em breve) um Tooltip do Arrow. Sem acoplamento a componente legado.

Senhaⓘ

<Label label="Senha">
  <template #hint>
    <!-- hoje: um ícone; amanhã: <Tooltip text="..."><Icon name="help" /></Tooltip> -->
    <Icon name="help" />
  </template>
</Label>

API

Props

Prop	Tipo	Padrão	Descrição
label	string	—	Texto do rótulo. Alternativa ao slot default.
for	string	—	id do campo associado → atributo for nativo.
mandatory	boolean	false	Exibe o asterisco de obrigatório.

Slots

Nome	Descrição
default	Conteúdo do rótulo (tem prioridade sobre label).
hint	Afixo de ajuda à direita do texto (ícone, Tooltip…).

Acessibilidade

• for associa o rótulo ao input nativamente (clicar foca; leitores de tela vinculam).
• O asterisco é decorativo (aria-hidden) — comunique a obrigatoriedade no input com aria-required="true".
• O conteúdo do #hint é responsabilidade do consumidor garantir foco/leitura por teclado.

Migração do MeLabel

• relation → for (nome do atributo nativo).
• Props de margem (mt/mb/ml/mr/mx/my/margin) → removidas. Espaçamento é do layout que consome (use tokens de espaço no container), não do rótulo.
• tooltip + tooltipAlign* → slot #hint. O Arrow não acopla o Label a um Tooltip legado; o slot recebe o que você quiser (e o futuro Tooltip do Arrow).