MicroForm

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O MicroForm é um formulário simplificado embutido em um componente de seleção (Select/Autocomplete). Ele permite o cadastro rápido de novos itens sem que o usuário precise abandonar o fluxo atual ou navegar para outra página, garantindo a continuidade da operação. ![image]((hosted image))

Diretrizes de Comportamento

Gatilho de Ação: Exiba a opção de cadastro no final da lista de resultados do Select quando a busca não encontrar o item desejado.
- Exemplo: Adicionar “Google”…
Limitação de Campos: Limite rigoroso de até 5 campos. Devem ser incluídos apenas parâmetros estritamente necessários para viabilizar o fluxo atual.
Cabeçalho de Contexto: O valor digitado pelo operador no campo de busca deve ser herdado automaticamente pelo campo de identificação principal do MicroForm (ex.: Razão Social).
Feedback de Ajuda: Use textos curtos para informar que dados complementares podem ser editados posteriormente nas configurações.
Seleção Automática: Ao acionar o botão de confirmação, o MicroForm fecha-se imediatamente e o registo recém-criado assume o estado selecionado no campo de origem.
Ações Claras: Utilize Cancelar e Adicionar (ou Salvar) para fechar o fluxo.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<div class="margin__md--all position-relative">
  <fieldset class="mds-microform__wrap">
    <legend class="mds-microform__legend">Autocomplete de endereço</legend>
    <div class="mds-microform__header d-flex">
      <div class="text-overflow flex-grow-1">Rua das Flores, 123</div>
      <div title="Cancelar" class="mds-microform__close">×</div>
    </div>
    <div class="mds-microform__body">
      <p>Campos do formulário aqui...</p>
    </div>
    <div class="mds-microform__footer text-right">
      <button class="mds-btn mds-btn--primary mds-btn--sm"><span class="mds-btn__label">Confirmar</span></button>
    </div>
  </fieldset>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`legend`	—	`Autocomplete de endereço`
`headerValue`	—	`Rua das Flores, 123`
`bodyContent`	—	`<pCampos do formulário aqui...</p`
`footerContent`	—	`<button class="mds-btn mds-btn--primary mds-btn--sm"<span…`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-microform`
Elementos	`.mds-microform__body` `.mds-microform__close` `.mds-microform__footer` `.mds-microform__header` `.mds-microform__legend` `.mds-microform__wrap`

Angular (mds-angular)

Seletor

mds-microform

Os MicroForm são utilizados em campos autocomplete com necessidade de cadastrar mais itens, com campos adicionais de informações

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label`	`string`	`null`	Label do campo
`value`	`string`	`null`	Value do campo autocomplete
`help`	`string`	`null`	Ajuda do campo

Outputs

Output	Payload	Descrição
`onClose`	`any`	—

Slots

Conteúdo projetado com o atributo data-position:

data-position="content"
data-position="footer"

Visão ao vivo

MicroForm — Figma (Design System 2.0) ↗

Componentes relacionados

Select / Autocomplete