CopyField

Campo de leitura com botão de copiar, para códigos, links e tokens.

O CopyField mostra um valor que a pessoa precisa levar para outro lugar: o código público de um Pedido, o link da Página, o token de uma Fonte. É um TextField somente leitura com um InputGroup e um botão de copiar com tooltip. Ele concentra a lógica de área de transferência que antes se repetia em três telas. O catálogo do HeroUI não traz esse componente.

import { CopyField } from "@rastreio-x/ui";

Padrão

label, value e copyLabel. O botão copia o valor, o ícone vira um visto por 2 segundos e o tooltip diz "Copiado".

Código Público

Link

Para links longos o campo rola o texto; o valor completo continua selecionável e copiável.

Link Público

Com aviso da tela

Com onCopied e onCopyFailed, a tela assume o anúncio (um Toast, por exemplo) e o campo deixa de anunciar por conta própria. Isso evita o leitor de tela dizer "copiado" duas vezes.

Link Público

Desabilitado

isDisabled bloqueia só o botão; o texto continua legível. Explique o motivo perto do campo e ligue-o com describedBy.

Link Público

O link só existe depois que a Marca é publicada.

Em um cabeçalho do Admin

Código e link públicos lado a lado, como no cabeçalho de um Pedido publicado.

Código Público

Link Público

Anatomia

CopyField
├── Label                  o rótulo visível
└── InputGroup
    ├── InputGroup.Input   o valor, somente leitura
    └── InputGroup.Suffix  botão de copiar + Tooltip

O componente monta tudo por dentro: TextField somente leitura, InputGroup, Button ghost de ícone e Tooltip. Há uma região role="status" oculta para o anúncio.

Propriedades

CopyField
Prop	Tipo	Padrão	Descrição
`label`*	`string`	-	Rótulo visível do campo.
`value`*	`string`	-	Valor atual (controlado). Em campos de formulário, é o valor enviado.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`copyLabel`	`string`	`"Copiar"`	Texto do botão e do anúncio (`Copiar código`, `Copiar link`).
`describedBy`	`string`	-	`id` do texto que explica por que o botão está desabilitado.
`inputTestId`	`string`	-	`data-testid` do campo de texto.
`isDisabled`	`boolean`	`false`	Desabilita o botão (e só ele): o campo continua legível. Use com `describedBy`.
`onCopied`	`(() => void)`	-	Chamado depois de copiar: a tela anuncia (região viva, Toast) como achar melhor. Com este callback o campo não anuncia por conta própria (evita ler "copiado" três vezes).
`onCopyFailed`	`(() => void)`	-	Chamado quando a área de transferência recusa (idem: a tela anuncia a falha).

Animações

Sem movimento

O botão tem o encolhimento ao pressionar do Button; o tooltip abre com a transição curta do HeroUI. O ícone troca de cópia para visto sem animação própria. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms.

Acessibilidade

O botão tem nome acessível Copiar código: Código Público (copyLabel mais o rótulo), diferente em cada campo.
O resultado é anunciado por uma região role="status" ("Código Público copiado" ou "Não foi possível copiar..."), a menos que a tela assuma o anúncio com onCopied/onCopyFailed.
O campo é somente leitura e focável: dá para selecionar o valor com o teclado e copiar manualmente se a área de transferência falhar.
O tooltip repete o estado (Copiado, Falha ao copiar) para quem usa mouse.
Com isDisabled, ligue describedBy ao texto que explica o motivo.

Boas práticas

Faça

Rótulo que diz o que é o valor e `copyLabel` que diz a ação: Código Público e Copiar código.

Evite

Esconder o valor ou deixar só o botão: a pessoa precisa conferir o que vai copiar.

Confirme por Toast quando o valor é uma ação central; o toast some sozinho.
Mantenha o valor completo no campo, sem truncar com reticências.
Para valores sensíveis (tokens), mostre só depois de gerar e avise que não será exibido de novo.
Para editar o valor, use um Input, não o CopyField.

Relacionados

InputGroup a base do campo com botão no sufixo.
Toast o aviso que confirma a cópia.
Tooltip o rótulo do botão.
TextField o campo editável equivalente.