Skip to Content
ComponentsAtomsInput

Input

Atom

Input coleta texto livre curto. Ele precisa de label, descrição quando houver consequência e erro textual quando a entrada falhar.

Use Input para busca, nome de fonte, identificador de caso, e-mail ou filtro textual. Para escolha entre opções conhecidas, prefira Select, Radio Group ou Checkbox.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label: string
  description?: string
  error?: string
}
 
export function PulsoInput({ id, label, description, error, className, ...props }: PulsoInputProps) {
  const reactId = React.useId()
  const inputId = id ?? reactId
  const descriptionId = description ? `${inputId}-description` : undefined
  const errorId = error ? `${inputId}-error` : undefined
  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined
 
  return (
    <div className="grid gap-1.5">
      <label htmlFor={inputId} className="font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]">
        {label}
      </label>
      <input
        id={inputId}
        aria-describedby={describedBy}
        aria-invalid={error ? true : undefined}
        className={[
          "h-9 rounded-[var(--radius-md)] border border-[var(--border-strong)] bg-[var(--card)] px-3 text-sm text-[var(--fg)]",
          "outline-none transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-easing)]",
          "placeholder:text-[var(--fg-subtle)] focus-visible:border-[var(--primary)] focus-visible:ring-[var(--ring-width)] focus-visible:ring-[var(--ring)]",
          "disabled:cursor-not-allowed disabled:text-[var(--fg-disabled)] disabled:opacity-60",
          error ? "border-[var(--destructive)]" : "",
          className,
        ].filter(Boolean).join(" ")}
        {...props}
      />
      {description ? <p id={descriptionId} className="text-xs text-[var(--fg-muted)]">{description}</p> : null}
      {error ? <p id={errorId} className="text-xs text-[var(--destructive)]">{error}</p> : null}
    </div>
  )
}
<PulsoInput
  label="Fonte monitorada"
  placeholder="Ex.: Banco Central"
  description="Use o nome público da fonte para facilitar auditoria."
/>

Regras

  • Sempre associe label ao campo via htmlFor/for.
  • Não use placeholder como label.
  • Mostre erro com texto, não apenas borda vermelha.
  • Use aria-describedby para conectar ajuda e erro.
  • Prefira descrições curtas que expliquem consequência ou formato esperado.
Last updated on
ControlsInput OTP