Skip to Content
ComponentsAtomsField

Field

Atom

Field conecta label, hint, controle e erro. Ele transforma input solto em contrato legível.

Use Field em formulários, filtros e configurações quando o significado do dado precisa ser claro. O erro deve dizer o que aconteceu e como corrigir, não apenas pintar a borda.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoFieldProps = {
  label: string
  hint?: string
  error?: string
  children: (ids: { inputId: string; hintId: string; errorId: string }) => React.ReactNode
}
 
export function PulsoField({ label, hint, error, children }: PulsoFieldProps) {
  const inputId = React.useId()
  const hintId = `${inputId}-hint`
  const errorId = `${inputId}-error`
 
  return (
    <div className="grid gap-1.5">
      <label htmlFor={inputId} className="font-mono text-xs uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-muted)]">
        {label}
      </label>
      {children({ inputId, hintId, errorId })}
      {hint ? <p id={hintId} className="text-sm text-[var(--fg-muted)]">{hint}</p> : null}
      {error ? <p id={errorId} className="text-sm font-medium text-[var(--risk-critical-text)]">{error}</p> : null}
    </div>
  )
}
<PulsoField label="Nome do monitoramento" hint="Use um nome curto e rastreável." error={undefined}>
  {({ inputId, hintId, errorId }) => (
    <input
      id={inputId}
      aria-describedby={`${hintId} ${errorId}`}
      className="h-9 rounded-[var(--radius-sm)] border border-[var(--border-strong)] bg-[var(--card)] px-3"
      placeholder="Operação Água"
    />
  )}
</PulsoField>

Regras

  • Todo controle precisa de label programático.
  • Hint explica formato, consequência ou critério; não repete placeholder.
  • Erro deve ser específico e acionável.
  • Use aria-describedby para conectar ajuda e erro ao controle.
Last updated on
EmptyHover Card