Campo de texto.

<div class="ui-sample ui-form"><label for="text-input-0">Nombre del proyecto</label><input class="input" id="text-input-0" type="text" maxLength="50" aria-describedby="text-input-0-help" value="Mapa de Santiago"/><small id="text-input-0-help">Usa un nombre que se entienda fuera del equipo.</small></div>

<div class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950"><label for="text-input-0">Nombre del proyecto</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="text-input-0" type="text" maxLength="50" aria-describedby="text-input-0-help" value="Mapa de Santiago"/><small class="text-sm text-slate-600" id="text-input-0-help">Usa un nombre que se entienda fuera del equipo.</small></div>

import type { ChangeEventHandler } from "react";

export interface TextInputProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo; la ayuda usa `${id}-help`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  type?: "text" | "email" | "tel" | "url" | "number" | "password";
  /** Valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Largo máximo en caracteres. */
  maxLength?: number;
  placeholder?: string;
  disabled?: boolean;
  /** Texto bajo el campo: una indicación o el contador de caracteres. */
  help?: string;
  className?: string;
}

/**
 * Campo de texto de una línea con etiqueta y ayuda, para nombres, títulos y datos cortos.
 *
 * Con `maxLength`, la ayuda puede mostrar el contador de caracteres.
 *
 * @example <TextInput id="nombre" label="Nombre del proyecto" defaultValue="" help="Usa un nombre que se entienda fuera del equipo." />
 * @example <TextInput id="nombre" value={nombre} onChange={cambiar} help={`${nombre.length} de 50 caracteres`} />
 */
export function TextInput({
  label = "Nombre del proyecto",
  id = "text-input-0",
  name,
  type = "text",
  defaultValue = "Mapa de Santiago",
  value,
  onChange,
  maxLength = 50,
  placeholder,
  disabled,
  help = "Usa un nombre que se entienda fuera del equipo.",
  className,
}: TextInputProps) {
  const helpId = help ? `${id}-help` : undefined;
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-form", className].filter(Boolean).join(" ")}>
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        type={type}
        maxLength={maxLength}
        placeholder={placeholder}
        disabled={disabled}
        aria-describedby={helpId}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
      />
      {help ? <small id={helpId}>{help}</small> : null}
    </div>
  );
}