Skip to Content
ComponentsMoleculesForm Field

Form Field

Molecule

Form Field conecta label, controle, descrição e erro para que o operador saiba o que preencher, por quê e como corrigir.

Use Form Field para qualquer entrada que precise de contexto, validação ou rastreabilidade. Placeholder não substitui label, e erro precisa estar próximo do controle.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoFormFieldProps = {
  id?: string
  label: string
  description?: string
  error?: string
  required?: boolean
  children: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>>
}
 
export function PulsoFormField({
  id,
  label,
  description,
  error,
  required,
  children,
}: PulsoFormFieldProps) {
  const reactId = React.useId()
  const fieldId = id ?? reactId
  const descriptionId = description ? `${fieldId}-description` : undefined
  const errorId = error ? `${fieldId}-error` : undefined
  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined
 
  return (
    <div className="grid gap-1.5">
      <label
        htmlFor={fieldId}
        className="font-mono text-xs font-semibold uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-muted)]"
      >
        {label}
        {required ? <span className="text-[var(--risk-critical-text)]"> *</span> : null}
      </label>
 
      {React.cloneElement(children, {
        id: fieldId,
        required,
        "aria-invalid": Boolean(error),
        "aria-describedby": describedBy,
        className: [
          "min-h-10 rounded-[var(--radius-md)] border bg-[var(--card)] px-3 text-sm text-[var(--fg)]",
          error ? "border-[var(--risk-critical-border)]" : "border-[var(--border)]",
          "focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]",
          children.props.className,
        ].filter(Boolean).join(" "),
      })}
 
      {description ? (
        <p id={descriptionId} className="text-xs leading-5 text-[var(--fg-muted)]">
          {description}
        </p>
      ) : null}
 
      {error ? (
        <p id={errorId} className="text-sm leading-5 text-[var(--risk-critical-text)]">
          {error}
        </p>
      ) : null}
    </div>
  )
}
<PulsoFormField
  label="Fonte principal"
  description="Use URL, relatório ou origem auditável. Não use Cris como fonte final."
  error="Informe a fonte para manter rastreabilidade."
  required
>
  <input name="source" />
</PulsoFormField>

Quando usar

  • Campo de formulário com label visível.
  • Entrada que precisa de ajuda, regra de preenchimento ou erro.
  • Campos que podem receber sugestão da Cris, mas exigem revisão humana.
  • Superfícies de criação, edição, configuração ou revisão operacional.

Acessibilidade

  • label conectado ao controle por htmlFor/id.
  • Descrição e erro conectados por aria-describedby.
  • Erro deve atualizar aria-invalid no controle.
  • Campo obrigatório precisa ser indicado visualmente e semanticamente.
  • Não dependa só de cor para comunicar erro.

Regras

  1. Todo campo editável precisa de label visível.
  2. Placeholder é exemplo, não nome do campo.
  3. Descrição explica regra, formato ou consequência.
  4. Erro deve dizer como corrigir.
  5. Conteúdo assistido por IA precisa mostrar origem e permitir edição.
Last updated on
Empty StateInput Group