Búsqueda.

<form class="ui-sample ui-form" role="search" action="#resultados"><label for="search-field-0">Buscar en documentación</label><div><input class="input" id="search-field-0" type="search" value=""><button class="btn btn--primary" type="submit">Buscar</button></div><small>Busca componentes, decisiones y contratos.</small></form>

<form class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" role="search" action="#resultados"><label for="search-field-0">Buscar en documentación</label><div><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="search-field-0" type="search" value=""><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Buscar</button></div><small class="text-sm text-slate-600">Busca componentes, decisiones y contratos.</small></form>

import type { ChangeEventHandler, FormEventHandler } from "react";

export interface SearchFieldProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo. Usa uno distinto por búsqueda en la página. */
  id?: string;
  /** Nombre del parámetro de la consulta (por ejemplo `q`). */
  name?: string;
  /** Destino del formulario; sin JavaScript, la búsqueda navega ahí. */
  action?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  placeholder?: string;
  /** Texto del botón que envía la búsqueda. */
  submitLabel?: string;
  /** Texto bajo el campo: una indicación o el número de resultados. */
  help?: string;
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Formulario de búsqueda con etiqueta, campo, botón y una línea de ayuda o de resultados, para encontrar contenido dentro de un sitio o sección.
 *
 * Es un `<form role="search">`: sin JavaScript envía la consulta a `action`.
 *
 * @example <SearchField id="buscar" name="q" action="/buscar" label="Buscar en documentación" />
 * @example <SearchField id="buscar" defaultValue="navbar" help="12 resultados" />
 */
export function SearchField({
  label = "Buscar en documentación",
  id = "search-field-0",
  name,
  action = "#resultados",
  defaultValue = "",
  value,
  onChange,
  placeholder,
  submitLabel = "Buscar",
  help = "Busca componentes, decisiones y contratos.",
  onSubmit,
  className,
}: SearchFieldProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form className={["ui-form", className].filter(Boolean).join(" ")} role="search" action={action} onSubmit={onSubmit}>
      <label htmlFor={id}>{label}</label>
      <div>
        <input
          className="input"
          id={id}
          name={name}
          type="search"
          placeholder={placeholder}
          onChange={onChange}
          {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
        />
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
      </div>
      {help ? <small>{help}</small> : null}
    </form>
  );
}