Form Helper

O mk-form-helper recebe um texto explicativo via content e renderiza um ícone de ajuda (circle-question-mark) que revela esse texto numa bolha ao passar o cursor ou focar — a mesma mecânica do mk-helper. Sem content, não renderiza nada, por isso é incluído incondicionalmente no rótulo de mk-input, mk-input-number, mk-number-field, mk-textarea, mk-date-picker, mk-checkbox, mk-radio, mk-select e mk-input-tag via a prop helperText de cada um — não é pensado para uso isolado fora desse contexto.

Padrão

import { MkFormHelper } from '@db1/makuco-ui-react';

<MkFormHelper content="Um texto explicando o conceito deste campo." />

<mk-form-helper content="Um texto explicando o conceito deste campo."></mk-form-helper>

Sem conteúdo

Sem content, o componente não renderiza nem o ícone nem a bolha — pode ser incluído incondicionalmente no rótulo de um campo sem ocupar espaço quando não há texto de ajuda.

<MkFormHelper />

<mk-form-helper></mk-form-helper>

Várias linhas

Cada \n em content vira uma quebra de linha na bolha. Para listar vários itens, junte-os com \n.

<MkFormHelper content={erros.map((erro) => `• ${erro}`).join('\n')} />

<!-- no componente: mensagem = this.erros.map((erro) => `• ${erro}`).join('\n') -->
<mk-form-helper [content]="mensagem"></mk-form-helper>

Uso via helperText nos campos de formulário

Na prática, o mk-form-helper não é instanciado diretamente — os campos de formulário o incluem internamente e expõem seu content através da prop helperText.

import { MkInput } from '@db1/makuco-ui-react';

<MkInput label="Email" helperText="Usaremos apenas para contato" />

<mk-input label="Email" helper-text="Usaremos apenas para contato"></mk-input>

Props — mk-form-helper

Acessibilidade

• Delega toda a semântica de acessibilidade ao mk-helper interno: role="tooltip" na bolha, aria-describedby no ícone, dismissível via Escape e clique fora.
• Sem content, nenhum nó de ajuda existe na árvore de acessibilidade — o ícone é omitido inteiramente, não apenas ocultado visualmente.