InputGroup

Campo de texto com prefixo e sufixo: ícone, unidade, domínio ou ação.

O InputGroup agrupa um campo com conteúdo fixo ao redor: um ícone, uma unidade (R$, dias), um pedaço de endereço ou um botão. O contexto fica visível sem entrar no valor digitado. Ele vive dentro de um TextField, que traz rótulo, ajuda e erro. O CopyField do Admin é um InputGroup somente leitura com um botão de copiar.

import { InputGroup, Label, TextField } from "@rastreio-x/ui";

Padrão

InputGroup.Prefix, InputGroup.Input e InputGroup.Suffix na ordem em que aparecem. O valor guardado é só o do Input; prefixo e sufixo são apresentação.

Endereço da Página

https://

.casaaurora.com.br

Com ícone

Um ícone no prefixo reforça o tipo do dado. Ele é decorativo (aria-hidden), porque o Label já nomeia o campo.

E-mail de Suporte

Site da Loja

Variantes

primary tem sombra suave; secondary não tem, e é a variante para usar dentro de cartões.

Primary

Secondary, no cartão

Unidade no sufixo

Use o sufixo para a unidade, assim a pessoa digita só o número. Combine com inputMode="numeric".

Prazo Total da Rota

dias

Entre 25 e 40 dias corridos.

Ação no sufixo

Um Button pequeno no sufixo age sobre o valor do próprio campo, como verificar um domínio. Reduza o respiro à direita (pe-1) para o botão alinhar com a borda.

Domínio da Loja

Estados

Somente leitura, desabilitado e inválido valem para o grupo inteiro: prefixo e sufixo acompanham o estado.

Somente leitura

https://

Desabilitado

https://

Inválido

https://

Várias linhas

InputGroup.TextArea no lugar do Input dá um grupo de várias linhas.

Mensagem ao Cliente

Aparece no e-mail de aviso.

Anatomia

InputGroup
├── InputGroup.Input
├── InputGroup.Prefix
├── InputGroup.Suffix
└── InputGroup.TextArea

InputGroup.Prefix: conteúdo fixo antes do valor (ícone, moeda, https://).
InputGroup.Input ou InputGroup.TextArea: o campo editável.
InputGroup.Suffix: conteúdo fixo depois do valor (unidade, domínio, botão).

Propriedades

Raiz (InputGroup):

InputGroup
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`children`	`ChildrenOrFunction<GroupRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<GroupRenderProps>`	`'react-aria-Group'`	Classes CSS aplicadas ao elemento.
`fullWidth`	`boolean`	-	Ocupa toda a largura disponível.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isInvalid`	`boolean`	-	Marca o valor como inválido e mostra o estado de erro.
`isReadOnly`	`boolean`	-	Permite selecionar e copiar o valor, mas não alterá-lo.
`render`	`DOMRenderFunction<'div', GroupRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`role`	`'group' \| 'presentation' \| 'region'`	`'group'`	Papel ARIA do elemento.
`style`	`StyleOrFunction<GroupRenderProps>`	-	Estilos em linha aplicados ao elemento.
`variant`	`'primary' \| 'secondary'`	-	Variante visual do componente.

Campo (InputGroup.Input):

InputGroup.Input
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<InputRenderProps>`	`'react-aria-Input'`	Classes CSS aplicadas ao elemento.
`placeholder`	`string`	-	Texto de apoio exibido quando o campo está vazio.
`render`	`DOMRenderFunction<'input', InputRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<InputRenderProps>`	-	Estilos em linha aplicados ao elemento.

Prefixo (InputGroup.Prefix):

InputGroup.Prefix
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Sufixo (InputGroup.Suffix):

InputGroup.Suffix
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Animações

CSS
indicativo

O grupo não anima por conta própria. O anel de foco azul envolve o grupo todo e troca de estado com uma transição curta de cor do HeroUI; com prefers-reduced-motion, a folha global da fachada a reduz a 0,01 ms. Um botão no sufixo herda o encolhimento ao pressionar do Button, que também respeita movimento reduzido.

Acessibilidade

O TextField liga o Label ao InputGroup.Input; o grupo tem role="group".
Prefixo e sufixo de texto não são lidos como parte do valor. Se o contexto importa (R$, dias), repita-o no Label ou na Description.
Ícones são aria-hidden; um botão no sufixo precisa de rótulo próprio, visível ou em aria-label.
O anel de foco mantém 3:1 contra a superfície, e o texto do campo 4,5:1.
Botão de ação no sufixo entra na ordem de tabulação logo depois do campo.

Boas práticas

Faça

Prefixo e sufixo para contexto fixo, e o valor editável só no `Input`.

Evite

Pôr no sufixo um texto longo ou que a pessoa precise editar.

Mantenha prefixo e sufixo curtos; o resto vai na Description.
Use variant="secondary" dentro de cartões.
Para só copiar um valor, use o CopyField, que já traz o botão e o anúncio.
Para busca com ícone e botão de limpar, use o SearchField.

Relacionados

TextField o contêiner com rótulo, ajuda e erro.
Input o campo sem prefixo ou sufixo.
CopyField campo somente leitura com botão de copiar.
SearchField busca com limpar.