MeLabel

Label de formulário com suporte a campo obrigatório (asterisco) e tooltip de ajuda contextual.

Playground

Importação

<script>
import { MeLabel } from '@/components/global/utils/export/index'
</script>

Uso Básico

Nome completo

<MeLabel label="Nome completo" />

Campo Obrigatório

Use mandatory para exibir um asterisco vermelho indicando que o campo é obrigatório.

Campo obrigatório*Campo opcional

<MeLabel label="Campo obrigatório" :mandatory="true" />
<MeLabel label="Campo opcional" />

Associado a um Input

Use relation para definir o atributo for do label, associando-o ao input correspondente.

E-mail*

<MeLabel label="E-mail" relation="email-input" :mandatory="true" />
<input id="email-input" type="email" placeholder="seu@email.com" />

Com Tooltip

Use tooltip para exibir um ícone de ajuda que revela texto informativo ao passar o mouse.

Senha

help_outline

Mínimo de 8 caracteres, com letras e números

<MeLabel
  label="Senha"
  tooltip="Mínimo de 8 caracteres, com letras e números"
/>

Posicionamento do Tooltip

Centro (padrão)

help_outline

Tooltip centralizado

Esquerda

help_outline

Tooltip à esquerda

Direita

help_outline

Tooltip à direita

Acima

help_outline

Tooltip acima

<MeLabel label="Centro (padrão)" tooltip="Tooltip centralizado" />
<MeLabel label="Esquerda" tooltip="Tooltip à esquerda" :tooltipAlignStart="true" />
<MeLabel label="Direita" tooltip="Tooltip à direita" :tooltipAlignEnd="true" />
<MeLabel label="Acima" tooltip="Tooltip acima" :tooltipAlignTop="true" />

Combinado

Senha*

help_outline

Mínimo de 8 caracteres, com letras e números

<MeLabel
  label="Senha"
  relation="senha-input"
  :mandatory="true"
  tooltip="Mínimo de 8 caracteres, com letras e números"
/>
<input id="senha-input" type="password" />

Margens

O MeLabel possui margem inferior padrão (8px sem tooltip, 4px com tooltip) pensada para uso em formulários. Quando necessário sobrescrever — por exemplo, ao usá-lo dentro de outros componentes como o MeSwitch — use as props de margem.

Padrão preservado

Quando nenhuma prop de margem é passada, o comportamento original é mantido. Usos existentes do MeLabel não são afetados.

mb — Margem inferior

Nome completo

<MeLabel label="Nome completo" :mb="24" />
<input type="text" />

mt — Margem superior

Próximo campo

<input type="text" />
<MeLabel label="Próximo campo" :mt="24" />

ml — Margem esquerda

Campo recuado

<MeLabel label="Campo recuado" :ml="24" />

mr — Margem direita

Campo com espaço à direita

<MeLabel label="Campo com espaço à direita" :mr="24" />

mx — Margem horizontal

Atalho para ml e mr ao mesmo tempo.

Campo centralizado

<MeLabel label="Campo centralizado" :mx="24" />

my — Margem vertical

Atalho para mt e mb ao mesmo tempo.

Campo intermediário

<input type="text" />
<MeLabel label="Campo intermediário" :my="24" />
<input type="text" />

API

Props

Prop	Tipo	Padrão	Descrição
label	string	-	Texto exibido no label
relation	string	-	ID do input associado (atributo for)
mandatory	boolean	false	Exibe asterisco vermelho indicando campo obrigatório
tooltip	string	-	Texto do tooltip de ajuda contextual
tooltipAlignEnd	boolean	false	Alinha o tooltip à direita
tooltipAlignStart	boolean	false	Alinha o tooltip à esquerda
tooltipAlignTop	boolean	false	Exibe o tooltip acima do elemento
margin	string | number	-	Margem em todos os lados
mt	string | number	-	Margem superior
mb	string | number	-	Margem inferior
ml	string | number	-	Margem esquerda
mr	string | number	-	Margem direita
mx	string | number	-	Margem horizontal (esquerda e direita)
my	string | number	-	Margem vertical (superior e inferior)

Acessibilidade

• O atributo for (via relation) associa semanticamente o label ao input
• O asterisco * é renderizado como <span> — considere adicionar aria-required="true" no input
• O tooltip interno usa MeTooltip, que suporta foco por teclado

Dica

Sempre defina relation apontando para o id do input correspondente. Isso melhora a usabilidade (clicar no label foca o input) e a acessibilidade.