Componentes · shadcn

InputGroup

Campo com adornos antes e depois: texto, ícone ou botão. O contorno de foco fica no grupo inteiro, e clicar no adorno foca o campo.

Adornos

@empresa.com.br

Prazo

dias

Com Field e estados

Código de verificação

Enviado por SMS para o final 4321.

CPF

O CPF precisa de 11 dígitos.

Protocolo

Texto longo e adorno em bloco

44/280 caracteres

Props

Prop	Tipo	Padrão	Descrição
InputGroup.size	"sm" \| "md" \| "lg"	"md"	Altura h-form-* do grupo.
InputGroup.status	"default" \| "danger" \| "warning" \| "success"	"default"	Cor da borda e dos adornos. aria-invalid no campo também liga a borda de perigo.
InputGroupAddon.align	"inline-start" \| "inline-end" \| "block-start" \| "block-end"	"inline-start"	Posição do adorno.
InputGroupButton.size	"xs" \| "sm" \| "icon-xs" \| "icon-sm"	"xs"	Botão compacto dentro do grupo. Ícone sozinho exige aria-label.
InputGroupInput.tone	"text" \| "data"	"text"	data para CPF, hash e protocolo.

<InputGroup>
  <InputGroupAddon><Search /></InputGroupAddon>
  <InputGroupInput placeholder="Buscar envelope" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs" aria-label="Copiar"><Copy /></InputGroupButton>
  </InputGroupAddon>
</InputGroup>