Formularios
Etiqueta pequeña arriba, campo con radio medio y un anillo azul al enfocar. El mismo estilo para campos, selectores y áreas de texto. Los errores dicen qué pasó y cómo corregirlo.
Campos
Máximo 500 caracteres.
<div class="row g-3 w-100">
<div class="col-md-6">
<label class="form-label" for="kit-nombre">Nombre</label>
<input id="kit-nombre" class="form-control" type="text" value="María López">
</div>
<div class="col-md-6">
<label class="form-label" for="kit-asesor">Responsable</label>
<select id="kit-asesor" class="form-select">
<option>Laura Ramírez Soto</option>
<option>Sin asignar</option>
</select>
</div>
<div class="col-12">
<label class="form-label" for="kit-nota">Nueva nota</label>
<textarea id="kit-nota" class="form-control" rows="2" placeholder="Escribe un comentario breve para el equipo"></textarea>
<div class="form-text">Máximo 500 caracteres.</div>
</div>
</div>Campos obligatorios y errores
Marca los obligatorios con la clase mr-req en la etiqueta: pone el asterisco en rojo sin escribirlo a mano. El error va debajo del campo con is-invalid e invalid-feedback.
Escribe un correo válido.
Usa
mr-box para agrupar un bloque dentro de un formulario, por ejemplo un registro similar que el asesor debe revisar.mr-box-sm: compacta
is-soft: fondo suave
is-warning: pide atención
<label class="form-label mr-req" for="nombre">Nombre</label>
<input id="nombre" class="form-control @error('nombre') is-invalid @enderror" wire:model="nombre">
@error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
<div class="mr-box">…bloque…</div> {{-- is-muted para atenuarlo --}}Revisión antes de confirmar y acciones al pie
mr-kv ordena pares dato-valor en columnas que se adaptan al ancho. mr-form-actions separa los botones del paso: «Atrás» a la izquierda y la acción principal a la derecha, una sola.
Contacto
- Nombre
- María López Soto
- Teléfono
- 55 1234 5678
- Correo
- maria@example.com
<div class="mr-box">
<div class="mr-block-head mb-3"><h6 class="card-title mb-0">Contacto</h6> <button class="btn btn-sm mr-btn-dashed">Editar</button></div>
<dl class="mr-kv">
<div><dt>Nombre</dt><dd>María López Soto</dd></div>
<div class="is-wide"><dt>Correo</dt><dd>maria@example.com</dd></div> {{-- is-wide ocupa toda la fila --}}
</dl>
</div>
<div class="mr-form-actions">
<button class="btn btn-light">Atrás</button>
<button class="btn btn-primary">Confirmar y guardar</button>
</div>Etiqueta con acción
Cuando la etiqueta lleva un interruptor o un enlace a la derecha, envuélvelos en mr-label-row: el campo queda alineado con sus vecinos.
<div class="mr-label-row">
<label class="form-label" for="curp">CURP (opcional)</label>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="extranjero">
<label class="form-check-label mr-small" for="extranjero">Extranjero</label>
</div>
</div>
<input id="curp" class="form-control">Formulario largo en secciones
Divide un formulario de más de cinco campos en secciones con título y una línea de ayuda. Pon el formulario en una tarjeta de ancho cómodo y las instrucciones en una caja a un lado.
Datos de la persona
Se toman de SIGEM; revisa que coincidan.
Acceso
Define qué puede hacer en el sistema.
Caja lateral con las instrucciones del formulario.
<div class="row g-3">
<div class="col-lg-8">
<div class="card"><div class="card-body p-4">
<section class="mr-form-section">
<h6 class="mr-form-section-title">Datos de la persona</h6>
<p class="mr-form-section-hint">Se toman de SIGEM; revisa que coincidan.</p>
…campos…
</section>
<section class="mr-form-section">…</section>
<div class="mr-form-actions">…</div>
</div></div>
</div>
<div class="col-lg-4"><div class="mr-box is-soft position-sticky" style="top: 1rem">…instrucciones…</div></div>
</div>Contraseña y pantalla de acceso
mr-password agrega el botón para mostrar u ocultar. Las pantallas de acceso usan mr-auth (fondo), mr-auth-card con has-brand (dos paneles), mr-auth-brand y mr-auth-form. El botón con data-loading-text muestra «Ingresando…» al enviar.
<div class="mr-auth">
<div class="mr-auth-card has-brand">
<div class="mr-auth-brand">
<img class="mr-auth-logo" src="…logo-blanco.svg" alt="SIGEM">
<img class="mr-auth-crest" src="…escudo-blanco.svg" alt="">
<p>Sistema de Información para la Gestión Marista.</p>
</div>
<div class="mr-auth-form">
<h1 class="mr-auth-title">Módulo CRM</h1>
<p class="mr-auth-lead">Inicia sesión con tu correo y contraseña.</p>
<form method="POST">
<label class="form-label" for="password">Contraseña</label>
<div class="mr-password">
<input id="password" class="form-control" type="password">
<button type="button" class="mr-password-toggle" data-mr-password-toggle aria-label="Mostrar la contraseña" aria-pressed="false"><i class="ri-eye-line"></i></button>
</div>
<button class="btn btn-primary w-100 mt-3" data-loading-text="Ingresando…">Ingresar</button>
</form>
</div>
</div>
</div>Tamaños de campos
Pequeño en filtros y celdas de tabla, normal en formularios, grande en pantallas táctiles. Se piden con form-control-sm, form-control-lg, form-select-sm y form-select-lg.
<div class="row g-3 w-100">
<div class="col-md-4">
<label class="form-label" for="kit-t-sm">Pequeño</label>
<input id="kit-t-sm" class="form-control form-control-sm" type="text" value="María López">
</div>
<div class="col-md-4">
<label class="form-label" for="kit-t-md">Normal</label>
<input id="kit-t-md" class="form-control" type="text" value="María López">
</div>
<div class="col-md-4">
<label class="form-label" for="kit-t-lg">Grande</label>
<input id="kit-t-lg" class="form-control form-control-lg" type="text" value="María López">
</div>
<div class="col-md-4">
<label class="form-label" for="kit-s-sm">Selector pequeño</label>
<select id="kit-s-sm" class="form-select form-select-sm"><option>Todos los estados</option></select>
</div>
<div class="col-md-4">
<label class="form-label" for="kit-s-md">Selector normal</label>
<select id="kit-s-md" class="form-select"><option>Todos los estados</option></select>
</div>
<div class="col-md-4">
<label class="form-label" for="kit-s-lg">Selector grande</label>
<select id="kit-s-lg" class="form-select form-select-lg"><option>Todos los estados</option></select>
</div>
<div class="col-md-4">
<div class="input-group input-group-sm">
<span class="input-group-text"><i class="ri-search-line"></i></span>
<input class="form-control" type="search" placeholder="Buscar (pequeño)" aria-label="Buscar, tamaño pequeño">
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-text"><i class="ri-search-line"></i></span>
<input class="form-control" type="search" placeholder="Buscar (normal)" aria-label="Buscar, tamaño normal">
</div>
</div>
<div class="col-md-4">
<div class="input-group input-group-lg">
<span class="input-group-text"><i class="ri-search-line"></i></span>
<input class="form-control" type="search" placeholder="Buscar (grande)" aria-label="Buscar, tamaño grande">
</div>
</div>
</div>Estados del campo
Correo válido.
Escribe los 10 dígitos del celular.
Lo asigna el sistema.
<div class="row g-3 w-100">
<div class="col-md-4">
<label class="form-label" for="kit-ok">Correo electrónico</label>
<input id="kit-ok" class="form-control is-valid" type="email" value="maria.lopez@ejemplo.mx">
<div class="valid-feedback d-block">Correo válido.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="kit-error">Teléfono celular</label>
<input id="kit-error" class="form-control is-invalid" type="tel" value="55352">
<div class="invalid-feedback d-block">Escribe los 10 dígitos del celular.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="kit-dis">Folio</label>
<input id="kit-dis" class="form-control" type="text" value="REG-13573" disabled>
<div class="form-text">Lo asigna el sistema.</div>
</div>
</div>Grupo de entrada y búsqueda
+52
<div class="row g-3 w-100">
<div class="col-md-6">
<label class="form-label" for="kit-buscar">Buscar persona</label>
<div class="input-group">
<span class="input-group-text"><i class="ri-search-line"></i></span>
<input id="kit-buscar" class="form-control" type="search" placeholder="Nombre, correo o folio">
</div>
</div>
<div class="col-md-6">
<label class="form-label" for="kit-cel">Celular</label>
<div class="input-group">
<span class="input-group-text">+52</span>
<input id="kit-cel" class="form-control" type="tel" placeholder="10 dígitos">
</div>
</div>
</div>Casillas, opciones e interruptor
<div class="d-flex flex-wrap gap-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kit-chk" checked>
<label class="form-check-label" for="kit-chk">Enviar copia al responsable</label>
</div>
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="kit-radio" id="kit-r1" checked>
<label class="form-check-label" for="kit-r1">Por correo</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="kit-radio" id="kit-r2">
<label class="form-check-label" for="kit-r2">Por teléfono</label>
</div>
</div>
</div>Tamaños de casillas y opciones
Con form-check-sm y form-check-lg en el contenedor. El tamaño grande es el recomendado en pantallas táctiles.
<div class="d-flex flex-wrap align-items-center gap-4">
<div class="form-check form-check-sm">
<input class="form-check-input" type="checkbox" id="kit-c-sm" checked>
<label class="form-check-label" for="kit-c-sm">Pequeña</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kit-c-md" checked>
<label class="form-check-label" for="kit-c-md">Normal</label>
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="checkbox" id="kit-c-lg" checked>
<label class="form-check-label" for="kit-c-lg">Grande</label>
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="radio" name="kit-rd-lg" id="kit-rd-lg" checked>
<label class="form-check-label" for="kit-rd-lg">Opción grande</label>
</div>
</div>Interruptores
Para opciones que se activan o desactivan al instante. Tres tamaños: pequeño dentro de tablas y barras, normal en formularios, grande en pantallas táctiles.
<div class="d-flex flex-wrap align-items-center gap-4">
<div class="form-check form-switch form-switch-sm">
<input class="form-check-input" type="checkbox" role="switch" id="kit-sw-sm" checked>
<label class="form-check-label" for="kit-sw-sm">Pequeño</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="kit-sw-md" checked>
<label class="form-check-label" for="kit-sw-md">Avisar al responsable</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" role="switch" id="kit-sw-lg" checked>
<label class="form-check-label" for="kit-sw-lg">Grande</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="kit-sw-off">
<label class="form-check-label" for="kit-sw-off">Apagado</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="kit-sw-dis" checked disabled>
<label class="form-check-label" for="kit-sw-dis">Deshabilitado</label>
</div>
</div>
Sí
Pon la etiqueta arriba del campo y explica el formato en el texto de ayuda. Marca el error junto al campo con una frase que diga cómo corregirlo.
No
No uses el placeholder como etiqueta. No muestres mensajes de error genéricos como «Dato inválido» ni solo los pintes de rojo.