Entrar o crear cuenta.

Patrón canónico de entrar o crear cuenta para cuenta, admin, usaia, firmas y documentos.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Nivel 2Círculo de Santiago · variación

Nivel 3Dentro de una página

Sitio · sección

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<nav class="ui-sample ui-auth-mode" data-auth-source="cis-auth-authentik" data-auth-mode-switch aria-label="Cuenta"><a href="#entrar" aria-current="page">Iniciar sesión</a><a href="#registro" aria-current="false">Crear cuenta</a></nav>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md

Cambia en esta marca

Mark circular y namebrand Círculo de Santiago en caja normal
Contenido societario y navegación propia

Permanece canónico

Misma estructura, orden de cuenta y footer
Tipografía, foco y comportamiento canónicos

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Usa HTML semántico, foco visible y estados explícitos.
Conserva contenido útil a 320 px y sin JavaScript.

Antes · problema observadoAnti-ejemplo no interactivo

correo@ejemplo.cl!Algo salió mal

No agregues sombras, radios ni franjas laterales decorativas.
No uses color, placeholder o icono como única explicación.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

1280 pxEscritorio

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y cis-auth · core/core-style
Consumidores	Cuenta, Admin, usaia, Firmas y Documentos
Dependencias	HTML nativo, validación de servidor
Estado	candidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón propuesto
Implementaciones	0 implementaciones observadas
Repositorios	Ningún repositorio observado
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Entrar o crear cuenta

Estados

Estado requerido
vacío
completo
inválido
disabled

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<nav class="ui-sample ui-auth-mode" data-auth-source="cis-auth-authentik" data-auth-mode-switch aria-label="Cuenta"><a href="#entrar" aria-current="page">Iniciar sesión</a><a href="#registro" aria-current="false">Crear cuenta</a></nav>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<nav class="ui-sample ui-auth-mode border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" data-auth-source="cis-auth-authentik" data-auth-mode-switch aria-label="Cuenta"><a class="underline underline-offset-4" href="#entrar" aria-current="page">Iniciar sesión</a><a class="underline underline-offset-4" href="#registro" aria-current="false">Crear cuenta</a></nav>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

import type { MouseEventHandler } from "react";

export interface AuthModeSwitchProps {
  /** Modo activo: entrar con una cuenta existente o crear una nueva. Marca su enlace con `aria-current="page"`. */
  mode?: "login" | "register";
  /** Nombre accesible del grupo de enlaces. */
  label?: string;
  loginLabel?: string;
  /** Destino del enlace para iniciar sesión. */
  loginHref?: string;
  registerLabel?: string;
  /** Destino del enlace para crear una cuenta. */
  registerHref?: string;
  onLogin?: MouseEventHandler<HTMLAnchorElement>;
  onRegister?: MouseEventHandler<HTMLAnchorElement>;
  className?: string;
}

/**
 * Selector entre iniciar sesión y crear cuenta, sobre el formulario de acceso de cis-auth.
 *
 * Son dos enlaces: sin JavaScript cada uno lleva a su pantalla. El modo activo se marca con `aria-current="page"`.
 *
 * @example <AuthModeSwitch mode="login" loginHref="/auth/login" registerHref="/auth/registro" />
 * @example <AuthModeSwitch mode="register" />
 */
export function AuthModeSwitch({
  mode = "login",
  label = "Cuenta",
  loginLabel = "Iniciar sesión",
  loginHref = "#entrar",
  registerLabel = "Crear cuenta",
  registerHref = "#registro",
  onLogin,
  onRegister,
  className,
}: AuthModeSwitchProps) {
  return (
    <nav className={["ui-auth-mode", className].filter(Boolean).join(" ")} data-auth-source="cis-auth-authentik" data-auth-mode-switch aria-label={label}>
      <a href={loginHref} aria-current={mode === "login" ? "page" : "false"} onClick={onLogin}>{loginLabel}</a>
      <a href={registerHref} aria-current={mode === "register" ? "page" : "false"} onClick={onRegister}>{registerLabel}</a>
    </nav>
  );
}