BaselineLab
0Apoyar

Estados de formularios

Compara disponibilidad, edición, elecciones, obligatoriedad, validez y rangos mediante estados reales de controles nativos.

Leer la guía

Preguntar a la IA

Estados de formularios

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Selector actual.demo-control:enabled
Soporte sin confirmarEspecificidad—

Preparando el escenario y sus resultados…

Coincide con los controles que permiten interacción y no están deshabilitados.

Preview del selector

HTML
<form class="form-state-demo" aria-label="Disponibilidad y edición de controles" novalidate>
  <label>Nombre
    <input class="demo-control text-control" name="name" placeholder="Escribe tu nombre" />
  </label>
  <label>Identificador de solo lectura
    <input class="demo-control text-control" name="identifier" value="PERFIL-01" readonly />
  </label>
  <label>Notas
    <textarea class="demo-control text-control" name="notes" placeholder="Añade una nota"></textarea>
  </label>
  <button class="demo-control" type="button" disabled>Comprobar formulario</button>
</form>
CSS
.demo-control:enabled {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}
JS
// Este escenario no necesita JavaScript.

Guía educativa de selectores de estados de formularios

El estado pertenece al control y al navegador

Relaciona atributos, propiedades, restricciones y acciones del usuario sin simular los estados nativos.

Volver al playground

Modelo mental

Algunos estados proceden del HTML inicial; otros cambian con propiedades o después de una interacción relevante.

:default / :checked

Inicial no significa actual

:default conserva la elección indicada por HTML; :checked refleja qué radio, checkbox u option está seleccionado ahora.

:valid / :user-valid

Validez inmediata o posterior

:valid y :invalid reflejan las restricciones ya; :user-valid y :user-invalid esperan la interacción que determina el navegador.

indeterminate

No existe un atributo indeterminate

En un checkbox, indeterminate es una propiedad del objeto HTMLInputElement y debe establecerse mediante JavaScript.

Disponibilidad

Compara si el control participa en la interacción y si su valor puede modificarse.

:enabled

Controles de interfaz habilitados.

Especificidad(0, 1, 0)
Comportamiento
  • Depende de si el elemento admite el estado disabled.
  • Un campo readonly sigue estando habilitado.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:enabled
HTML
Coincide: <input name="active" />
<input name="locked" disabled />
Errores frecuentes
  • No significa que el valor sea editable.
  • No se aplica a cualquier elemento sin atributo disabled.
Consultar la definición completaAbre en una pestaña nueva

:disabled

Controles de interfaz deshabilitados.

Especificidad(0, 1, 0)
Comportamiento
  • Un fieldset deshabilitado puede transmitir el estado a sus controles.
  • Los controles deshabilitados no participan normalmente en el envío.
Ejemplos
SelectorEspecificidad(0, 1, 1)
button:disabled
HTML
Coincide: <button disabled>Unavailable</button>
<button>Continue</button>
Errores frecuentes
  • No equivale a aria-disabled.
  • No debe usarse solo para cambiar la apariencia.
Consultar la definición completaAbre en una pestaña nueva

:read-only

Elementos cuyo contenido no puede alterar el usuario.

Especificidad(0, 1, 0)
Comportamiento
  • readonly mantiene el control enfocable y enviable.
  • Su aplicabilidad es más amplia que el atributo readonly.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:read-only
HTML
Coincide: <input value="Fixed" readonly />
<input value="Editable" />
Errores frecuentes
  • No equivale a disabled.
  • No significa que JavaScript no pueda cambiar el valor.
Consultar la definición completaAbre en una pestaña nueva

:read-write

Elementos cuyo contenido puede alterar el usuario.

Especificidad(0, 1, 0)
Comportamiento
  • Incluye campos editables y hosts contenteditable aplicables.
  • El estado depende de la editabilidad, no del foco.
Ejemplos
SelectorEspecificidad(0, 1, 1)
textarea:read-write
HTML
Coincide: <textarea>Editable</textarea>
<textarea readonly>Fixed</textarea>
Errores frecuentes
  • No significa que el control sea :valid.
  • Un input disabled no es editable.
Consultar la definición completaAbre en una pestaña nueva

:placeholder-shown

Campos que muestran actualmente su placeholder.

Especificidad(0, 1, 0)
Comportamiento
  • Deja de coincidir cuando el control tiene valor.
  • Observa el estado del campo, no el pseudoelemento del texto.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:placeholder-shown
HTML
Coincide: <input placeholder="Name" />
<input placeholder="Name" value="Ada" />
Errores frecuentes
  • No equivale a campo vacío en todos los controles.
  • No debe confundirse con ::placeholder.
Soporte y compatibilidad

Consulta el estado Baseline específico de :placeholder-shown.

Consultar la definición completaAbre en una pestaña nueva

Elecciones

Distingue valores predeterminados, seleccionados e indeterminados.

:default

Opciones o botones que representan la elección inicial.

Especificidad(0, 1, 0)
Comportamiento
  • Puede seguir coincidiendo después de cambiar la selección actual.
  • Se deriva del estado predeterminado definido por HTML.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:default
HTML
Coincide: <input type="radio" name="plan" checked />
<input type="radio" name="plan" />
Errores frecuentes
  • No equivale a :checked.
  • No selecciona cualquier valor recomendado.
Soporte y compatibilidad

Consulta el estado Baseline específico de :default.

Consultar la definición completaAbre en una pestaña nueva

:checked

Radios, checkboxes y opciones seleccionados actualmente.

Especificidad(0, 1, 0)
Comportamiento
  • Cambia con la interacción real del usuario.
  • En radios, marcar uno desmarca otro del mismo grupo.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:checked
HTML
Coincide: <input type="checkbox" checked />
<input type="checkbox" />
Errores frecuentes
  • No conserva necesariamente la elección inicial.
  • No cubre el estado mixto.
Consultar la definición completaAbre en una pestaña nueva

:indeterminate

Controles cuyo estado no es afirmativo ni negativo.

Especificidad(0, 1, 0)
Comportamiento
  • En checkboxes se activa mediante la propiedad indeterminate.
  • También puede aplicar a radios sin elección y progress sin value.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:indeterminate
HTML
Coincide: <input type="checkbox" data-indeterminate />
<script>checkbox.indeterminate = true;</script>
Errores frecuentes
  • No existe un atributo HTML indeterminate.
  • No equivale a unchecked.
Soporte y compatibilidad

Consulta el estado Baseline de :indeterminate y su aplicabilidad.

Consultar la definición completaAbre en una pestaña nueva

Validación

Observa obligatoriedad y validez antes y después de la interacción.

:required

Controles validables que exigen un valor.

Especificidad(0, 1, 0)
Comportamiento
  • Procede del atributo required cuando es aplicable.
  • Puede combinarse con estados de validez.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:required
HTML
Coincide: <input required />
<input />
Errores frecuentes
  • No todos los tipos de control admiten required.
  • El asterisco visual no crea el estado.
Consultar la definición completaAbre en una pestaña nueva

:optional

Controles validables que no son obligatorios.

Especificidad(0, 1, 0)
Comportamiento
  • Es el opuesto de :required dentro de los controles aplicables.
  • Un campo opcional vacío suele ser válido.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:optional
HTML
<input required />
Coincide: <input />
Errores frecuentes
  • No coincide con cualquier elemento sin required.
  • Opcional no significa irrelevante.
Consultar la definición completaAbre en una pestaña nueva

:valid

Controles que satisfacen sus restricciones nativas.

Especificidad(0, 1, 0)
Comportamiento
  • Puede coincidir desde la carga inicial.
  • Se actualiza mientras cambia el valor.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:valid
HTML
Coincide: <input type="email" value="ada@example.com" required />
<input type="email" value="ada@" required />
Errores frecuentes
  • No espera a que el usuario abandone el campo.
  • La validez nativa no sustituye toda validación de negocio.
Consultar la definición completaAbre en una pestaña nueva

:invalid

Controles que incumplen una restricción nativa.

Especificidad(0, 1, 0)
Comportamiento
  • Puede coincidir antes de cualquier interacción.
  • El formulario también puede ser inválido si contiene un control inválido.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:invalid
HTML
<input type="email" value="ada@example.com" required />
Coincide: <input type="email" value="ada@" required />
Errores frecuentes
  • No conviene mostrar un error agresivo solo por este estado inicial.
  • No equivale a aria-invalid.
Consultar la definición completaAbre en una pestaña nueva

:user-valid

Controles válidos después de interacción relevante.

Especificidad(0, 1, 0)
Comportamiento
  • El navegador decide cuándo el usuario ha comprometido el valor.
  • Deja de coincidir si el valor vuelve a ser inválido.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:user-valid
HTML
Coincide: <input type="email" value="ada@example.com" required />
<!-- matches after relevant user interaction -->
Errores frecuentes
  • No es una clase touched controlada por la aplicación.
  • No sustituye un mensaje accesible cuando sea necesario.
Soporte y compatibilidad

Está ampliamente disponible; su tiempo de activación pertenece al navegador.

Consultar la definición completaAbre en una pestaña nueva

:user-invalid

Controles inválidos después de interacción relevante.

Especificidad(0, 1, 0)
Comportamiento
  • Un intento de envío puede activarlo y enfocar el primer error.
  • Permite retrasar la señal visual respecto a :invalid.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:user-invalid
HTML
Coincide: <input type="email" value="ada@" required />
<!-- matches after relevant user interaction -->
Errores frecuentes
  • No se debe forzar en la carga inicial.
  • CSS no sincroniza por sí solo aria-invalid.
Soporte y compatibilidad

Está ampliamente disponible; combina el estilo con feedback accesible.

Consultar la definición completaAbre en una pestaña nueva

Rangos

Compara los mismos min y max con valores dentro y fuera del intervalo.

:in-range

Controles con valor dentro de min y max.

Especificidad(0, 1, 0)
Comportamiento
  • Solo aplica a controles que admiten límites de rango.
  • El valor también debe superar el resto de restricciones.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:in-range
HTML
Coincide: <input type="number" min="1" max="10" value="5" />
<input type="number" min="1" max="10" value="14" />
Errores frecuentes
  • No compara longitudes de texto.
  • Estar en rango no garantiza toda la validez.
Consultar la definición completaAbre en una pestaña nueva

:out-of-range

Controles con valor menor que min o mayor que max.

Especificidad(0, 1, 0)
Comportamiento
  • Se actualiza al modificar el número o fecha.
  • Implica una causa concreta de invalidez.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:out-of-range
HTML
<input type="number" min="1" max="10" value="5" />
Coincide: <input type="number" min="1" max="10" value="14" />
Errores frecuentes
  • Un valor con formato incorrecto no es necesariamente out-of-range.
  • No se aplica sin límites relevantes.
Consultar la definición completaAbre en una pestaña nueva