Vox Mente
Navegação

Componentes

Input Group

beta

Adorna um campo com prefixo, sufixo ou botão sem que a tela monte a borda à mão.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/input-group

Playground
<InputGroup>
  <InputGroupAddon>
    <MagnifyingGlass />
  </InputGroupAddon>
  <InputGroupInput placeholder="Buscar aluno" />
</InputGroup>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
InputGroup
  └─ InputGroupAddon
  └─ InputGroupInput
InputGroup
  └─ InputGroupInput
  └─ InputGroupAddon
    └─ InputGroupText

Uso

Agrupa um input com adornos — ícone, texto fixo, botão. O foco vai para o campo mesmo se o clique cair no adorno.

Posição do adorno

`align` decide o lado. `inline-start` e `inline-end` ficam na mesma linha do campo.
%

Com botão

`InputGroupButton` já vem com o tamanho certo para caber no adorno. Use para uma ação curta, ligada ao campo — copiar, limpar, gerar.

Texto fixo

`InputGroupText` marca uma unidade ou prefixo que não é editável — não é rótulo, é parte do valor.
%

Desabilitado

O grupo inteiro esmaece junto — adorno e campo comunicam o mesmo estado.

Inválido

`aria-invalid` no campo propaga borda e anel de erro para o grupo todo, não só para o input.

Com atalho de teclado

`Kbd` no adorno mostra o atalho que abre o campo. É indicação, não gatilho — o atalho em si é registrado pela aplicação.
⌘K

Com dropdown

`InputGroupButton` como gatilho de um `DropdownMenu` — a prop é `render`, não `asChild`. Use para uma escolha curta acoplada ao campo, como a unidade do valor.

Com spinner

`Spinner` no adorno avisa que o campo está validando ou salvando em segundo plano — combine com `disabled` para travar a edição enquanto isso.

Com Textarea

`InputGroupTextarea` troca o campo de uma linha por texto longo. `align="block-start"` e `align="block-end"` empilham o adorno acima ou abaixo do texto — o grupo vira coluna sozinho, sem classe extra.
Anotação da sessão
Visível só para a coordenação

Campo customizado

O adorno não precisa envolver um `Input` — qualquer conteúdo focável funciona, desde que o campo real fique dentro do grupo. Aqui um botão com ícone substitui o texto do adorno.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

InputGroupAddon

PropTipoPadrão
align"inline-start" | "inline-end" | "block-start" | "block-end" | null"inline-start"

Também aceita as props de React, incluindo className e os atributos de DOM.

InputGroupButton

PropTipoPadrão
size"xs" | "sm" | "icon-xs" | "icon-sm" | null"xs"
type"button" | "reset" | "submit""button"
variant"link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null"ghost"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

InputGroup, InputGroupInput, InputGroupText, InputGroupTextarea não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css