Skip to Content
ComponentsMoleculesInput Group

Input Group

Molecule

Input Group adiciona contexto ou ação secundária a um input sem tirar o foco do preenchimento.

Use Input Group para busca, URL, prefixos fixos, sufixos de unidade ou ações auxiliares como testar webhook. O elemento anexado não deve competir com a ação primária do formulário.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoInputGroupProps = {
  id?: string
  label: string
  prefix?: React.ReactNode
  suffix?: React.ReactNode
  action?: React.ReactNode
} & React.InputHTMLAttributes<HTMLInputElement>
 
export function PulsoInputGroup({
  id,
  label,
  prefix,
  suffix,
  action,
  className,
  ...props
}: PulsoInputGroupProps) {
  const reactId = React.useId()
  const inputId = id ?? reactId
 
  return (
    <div className="grid gap-1.5">
      <label
        htmlFor={inputId}
        className="font-mono text-xs font-semibold uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-muted)]"
      >
        {label}
      </label>
 
      <div className="flex min-h-10 items-center rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--card)] focus-within:outline focus-within:outline-[var(--ring-width)] focus-within:outline-offset-2 focus-within:outline-[var(--ring)]">
        {prefix ? (
          <span className="flex items-center border-r border-[var(--border)] px-3 text-sm text-[var(--fg-muted)]">
            {prefix}
          </span>
        ) : null}
 
        <input
          id={inputId}
          className={[
            "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--fg)] outline-none placeholder:text-[var(--fg-subtle)]",
            className,
          ].filter(Boolean).join(" ")}
          {...props}
        />
 
        {suffix ? (
          <span className="flex items-center border-l border-[var(--border)] px-3 text-sm text-[var(--fg-muted)]">
            {suffix}
          </span>
        ) : null}
 
        {action ? (
          <div className="border-l border-[var(--border)] px-1">{action}</div>
        ) : null}
      </div>
    </div>
  )
}
<PulsoInputGroup
  label="Webhook"
  prefix="https://"
  placeholder="example.com/pulso/webhook"
  action={
    <button className="rounded-[var(--radius-sm)] px-3 py-1.5 text-sm font-medium text-[var(--primary)] hover:bg-[var(--muted)]">
      Testar
    </button>
  }
/>

Quando usar

  • Busca com ícone ou prefixo visual.
  • URLs com protocolo ou domínio fixo.
  • Valores com unidade (min, %, kg, menções/h).
  • Ação secundária acoplada ao campo, como testar, copiar ou revelar.

Quando não usar

  • Para esconder ação primária dentro do campo.
  • Quando o prefixo altera o significado de forma ambígua.
  • Em campos onde a ação secundária pode disparar efeito destrutivo.
  • Para filtros complexos; use Filter Bar.

Regras

  1. O label continua fora do grupo.
  2. Prefixo/sufixo devem ser texto real quando fazem parte do valor esperado.
  3. Ícone sozinho precisa de nome acessível quando for acionável.
  4. Ação secundária não deve enviar formulário inteiro.
  5. Erro pertence ao Form Field que envolve o grupo.
Last updated on
Form FieldMetric Card