Visão geral

O InputGroup unifica um campo de texto com addons (ícones, texto, botões) em uma unidade visual coesa.

Exemplos básicos

.com.br

Import

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@/components/ui/input-group"

Posicionamento dos addons

Os addons podem ser posicionados inline (esquerda/direita) ou em bloco (topo/base).

Inline (horizontal)

@empresa.com

https://

Bloco (vertical)

Endereço de e-mail

Mínimo 2 caracteres

Padrão de implementação

Snippets para os usos mais comuns do InputGroup.

Campo de busca

import { SearchIcon } from "lucide-react"

<InputGroup>
  <InputGroupAddon align="inline-start">
    <InputGroupText>
      <SearchIcon />
    </InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="Buscar..." />
</InputGroup>

Campo monetário

<InputGroup>
  <InputGroupAddon align="inline-start">
    <InputGroupText>R$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput
    type="number"
    placeholder="0,00"
    min={0}
    step={0.01}
  />
</InputGroup>

Com botão de ação

<InputGroup>
  <InputGroupInput
    value={url}
    readOnly
    placeholder="Link gerado..."
  />
  <InputGroupAddon align="inline-end">
    <InputGroupButton onClick={handleCopy} aria-label="Copiar link">
      <CopyIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Sub-componentes

API dos sub-componentes do InputGroup.

Sub-componentes

InputGroup

Container principal. Gerencia o visual unificado.

InputGroupInput

Campo de texto interno. Substitui o Input padrão dentro do grupo.

InputGroupAddon

Container de addon. Prop align: inline-start | inline-end | block-start | block-end.

InputGroupText

Texto ou ícone não-interativo no addon.

InputGroupButton

Botão dentro do addon. Prop size: xs | sm | icon-xs | icon-sm.

InputGroupTextarea

Textarea dentro do grupo. Para inputs multiline com addons.

Acessibilidade

O container usa role="group" para agrupar o input e seus addons.

Use Field externo com label para nomear o InputGroup para leitores de tela.

Para botões de ação (copiar, enviar), sempre inclua aria-label descritivo.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter