Selector nativo.

<div class="ui-sample ui-form"><label for="select-native-0">Región</label><select class="input" id="select-native-0"><option value="">Selecciona una región</option><option selected="">Región Metropolitana</option><option>Valparaíso</option></select></div>

<div class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950"><label for="select-native-0">Región</label><select class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="select-native-0"><option value="">Selecciona una región</option><option selected="">Región Metropolitana</option><option>Valparaíso</option></select></div>

import type { ChangeEventHandler } from "react";

export interface SelectNativeOption {
  /** Texto visible de la opción. */
  label: string;
  /** Valor enviado; si falta, se envía el texto. */
  value?: string;
  disabled?: boolean;
}

export interface SelectNativeProps {
  /** Etiqueta visible del selector. */
  label?: string;
  /** Id del selector. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Primera opción, con valor vacío, que pide elegir; vacío la omite. */
  placeholder?: string;
  options?: SelectNativeOption[];
  /** Valor inicial de un selector no controlado (el `value` de la opción o su texto). */
  defaultValue?: string;
  /** Valor de un selector controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLSelectElement>;
  disabled?: boolean;
  /** Mensaje de error; si existe, el selector queda con `aria-invalid`. */
  error?: string;
  className?: string;
}

/**
 * Selector nativo con etiqueta para elegir un valor de una lista corta y fija.
 *
 * Usa `<select>` del navegador: funciona sin JavaScript y con el teclado del sistema.
 *
 * @example <SelectNative id="region" label="Región" options={[{ label: "Región Metropolitana" }, { label: "Valparaíso" }]} defaultValue="Valparaíso" />
 * @example <SelectNative id="region" defaultValue="" error="Selecciona una región." />
 */
export function SelectNative({
  label = "Región",
  id = "select-native-0",
  name,
  placeholder = "Selecciona una región",
  options = [{ label: "Región Metropolitana" }, { label: "Valparaíso" }],
  defaultValue = "Región Metropolitana",
  value,
  onChange,
  disabled,
  error,
  className,
}: SelectNativeProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-form", className].filter(Boolean).join(" ")}>
      <label htmlFor={id}>{label}</label>
      <select
        className="input"
        id={id}
        name={name}
        disabled={disabled}
        aria-invalid={error ? "true" : undefined}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
      >
        {placeholder ? <option value="">{placeholder}</option> : null}
        {options.map((opcion, i) => (
          <option key={opcion.value ?? `${i}-${opcion.label}`} value={opcion.value} disabled={opcion.disabled}>
            {opcion.label}
          </option>
        ))}
      </select>
      {error ? <span className="ui-field-error">{error}</span> : null}
    </div>
  );
}