Checkbox, radio y switch

.form-check agrupa el control (form-check__input) y su texto (form-check__label). Se dibujan con CSS sobre el input nativo, así que funcionan con teclado, en formularios y con lectores de pantalla.

Checkbox

Agrupa las opciones relacionadas en un <fieldset class="form-field"> con un <legend class="form-label">.

MóvilTabletEscritorioCompleto

HTML

<fieldset class="form-field">
  <legend class="form-label">Quiero recibir</legend>
  <div class="form-check">
    <input class="form-check__input" type="checkbox" id="novedades" name="avisos" value="novedades" checked>
    <label class="form-check__label" for="novedades">Novedades del blog</label>
  </div>
  <div class="form-check">
    <input class="form-check__input" type="checkbox" id="ofertas" name="avisos" value="ofertas">
    <label class="form-check__label" for="ofertas">Ofertas y promociones</label>
  </div>
</fieldset>

React

export default function ChecksCheckbox() {
  return (
    <fieldset className="form-field">
      <legend className="form-label">Quiero recibir</legend>
      <div className="form-check">
        <input className="form-check__input" type="checkbox" id="novedades" name="avisos" value="novedades" defaultChecked />
        <label className="form-check__label" htmlFor="novedades">Novedades del blog</label>
      </div>
      <div className="form-check">
        <input className="form-check__input" type="checkbox" id="ofertas" name="avisos" value="ofertas" />
        <label className="form-check__label" htmlFor="ofertas">Ofertas y promociones</label>
      </div>
    </fieldset>
  );
}

Radio

Los radios de un grupo comparten el mismo name: solo se puede elegir uno.

MóvilTabletEscritorioCompleto

HTML

<fieldset class="form-field">
  <legend class="form-label">Forma de pago</legend>
  <div class="form-check">
    <input class="form-check__input" type="radio" id="pago-mensual" name="pago" value="mensual" checked>
    <label class="form-check__label" for="pago-mensual">Mensual</label>
  </div>
  <div class="form-check">
    <input class="form-check__input" type="radio" id="pago-anual" name="pago" value="anual">
    <label class="form-check__label" for="pago-anual">Anual (2 meses gratis)</label>
  </div>
</fieldset>

React

export default function ChecksRadio() {
  return (
    <fieldset className="form-field">
      <legend className="form-label">Forma de pago</legend>
      <div className="form-check">
        <input className="form-check__input" type="radio" id="pago-mensual" name="pago" value="mensual" defaultChecked />
        <label className="form-check__label" htmlFor="pago-mensual">Mensual</label>
      </div>
      <div className="form-check">
        <input className="form-check__input" type="radio" id="pago-anual" name="pago" value="anual" />
        <label className="form-check__label" htmlFor="pago-anual">Anual (2 meses gratis)</label>
      </div>
    </fieldset>
  );
}

En fila

form-field--inline muestra las opciones en una fila, que pasa a la siguiente línea si no caben.

MóvilTabletEscritorioCompleto

HTML

<fieldset class="form-field form-field--inline">
  <legend class="form-label">¿Cómo prefieres que te contactemos?</legend>
  <div class="form-check">
    <input class="form-check__input" type="radio" id="contacto-email" name="contacto" value="email" checked>
    <label class="form-check__label" for="contacto-email">Email</label>
  </div>
  <div class="form-check">
    <input class="form-check__input" type="radio" id="contacto-telefono" name="contacto" value="telefono">
    <label class="form-check__label" for="contacto-telefono">Teléfono</label>
  </div>
  <div class="form-check">
    <input class="form-check__input" type="radio" id="contacto-whatsapp" name="contacto" value="whatsapp">
    <label class="form-check__label" for="contacto-whatsapp">WhatsApp</label>
  </div>
</fieldset>

React

export default function ChecksEnFila() {
  return (
    <fieldset className="form-field form-field--inline">
      <legend className="form-label">¿Cómo prefieres que te contactemos?</legend>
      <div className="form-check">
        <input className="form-check__input" type="radio" id="contacto-email" name="contacto" value="email" defaultChecked />
        <label className="form-check__label" htmlFor="contacto-email">Email</label>
      </div>
      <div className="form-check">
        <input className="form-check__input" type="radio" id="contacto-telefono" name="contacto" value="telefono" />
        <label className="form-check__label" htmlFor="contacto-telefono">Teléfono</label>
      </div>
      <div className="form-check">
        <input className="form-check__input" type="radio" id="contacto-whatsapp" name="contacto" value="whatsapp" />
        <label className="form-check__label" htmlFor="contacto-whatsapp">WhatsApp</label>
      </div>
    </fieldset>
  );
}

Switch

form-check--switch convierte un checkbox en interruptor. Agrega role="switch" para que se anuncie como encendido o apagado. Úsalo para ajustes que se aplican de inmediato; para opciones que se envían con un formulario, usa un checkbox.

MóvilTabletEscritorioCompleto

HTML

<div class="form-field">
  <div class="form-check form-check--switch">
    <input class="form-check__input" type="checkbox" role="switch" id="notificaciones" name="notificaciones" checked>
    <label class="form-check__label" for="notificaciones">Notificaciones</label>
  </div>
  <div class="form-check form-check--switch">
    <input class="form-check__input" type="checkbox" role="switch" id="modo-oscuro" name="modo-oscuro">
    <label class="form-check__label" for="modo-oscuro">Modo oscuro</label>
  </div>
</div>

React

export default function ChecksSwitch() {
  return (
    <div className="form-field">
      <div className="form-check form-check--switch">
        <input className="form-check__input" type="checkbox" role="switch" id="notificaciones" name="notificaciones" defaultChecked />
        <label className="form-check__label" htmlFor="notificaciones">Notificaciones</label>
      </div>
      <div className="form-check form-check--switch">
        <input className="form-check__input" type="checkbox" role="switch" id="modo-oscuro" name="modo-oscuro" />
        <label className="form-check__label" htmlFor="modo-oscuro">Modo oscuro</label>
      </div>
    </div>
  );
}

Deshabilitado

El atributo disabled atenúa el control y su texto.

MóvilTabletEscritorioCompleto

HTML

<div class="form-field">
  <div class="form-check">
    <input class="form-check__input" type="checkbox" id="check-off" checked disabled>
    <label class="form-check__label" for="check-off">Checkbox deshabilitado</label>
  </div>
  <div class="form-check">
    <input class="form-check__input" type="radio" id="radio-off" disabled>
    <label class="form-check__label" for="radio-off">Radio deshabilitado</label>
  </div>
  <div class="form-check form-check--switch">
    <input class="form-check__input" type="checkbox" role="switch" id="switch-off" disabled>
    <label class="form-check__label" for="switch-off">Switch deshabilitado</label>
  </div>
</div>

React

export default function ChecksDeshabilitado() {
  return (
    <div className="form-field">
      <div className="form-check">
        <input className="form-check__input" type="checkbox" id="check-off" defaultChecked disabled />
        <label className="form-check__label" htmlFor="check-off">Checkbox deshabilitado</label>
      </div>
      <div className="form-check">
        <input className="form-check__input" type="radio" id="radio-off" disabled />
        <label className="form-check__label" htmlFor="radio-off">Radio deshabilitado</label>
      </div>
      <div className="form-check form-check--switch">
        <input className="form-check__input" type="checkbox" role="switch" id="switch-off" disabled />
        <label className="form-check__label" htmlFor="switch-off">Switch deshabilitado</label>
      </div>
    </div>
  );
}

Indeterminado

Un checkbox que controla un grupo (por ejemplo, «Seleccionar todo» con algunos marcados) muestra una raya. Este estado solo se activa con JS: input.indeterminate = true.

Para el estado de error, revisa Validación.

Accesibilidad

• Conecta cada form-check__label con su input (for e id): así, el clic en el texto también marca la opción.
• Un grupo de opciones va en <fieldset> con <legend>: el lector anuncia la pregunta junto a cada opción.
• El foco con teclado muestra el contorno de 2 px en primary. Las flechas mueven la selección entre radios de un grupo.
• En el modo de alto contraste de Windows, la marca usa los colores del sistema.
• El borde sin marcar tiene un contraste de 3,3:1 con los colores por defecto.

Clases

Clase	Uso
form-check	Contenedor del control y su texto.
form-check__input	<input type="checkbox"> o <input type="radio">.
form-check__label	Texto del control.
form-check--switch	Interruptor (con role="switch").
form-field--inline	Opciones en fila, en el form-field que las agrupa.

Variables

Variable	Valor por defecto	Uso
--ds-form-check-size	1.25em	Tamaño de la casilla y del radio.
--ds-form-check-gap	var(--ds-space-2)	Separación entre el control y el texto.
--ds-form-check-bg	var(--ds-color-surface)	Fondo sin marcar.
--ds-form-check-border-color	color-mix(in srgb, var(--ds-color-text) 50%, var(--ds-color-surface))	Borde sin marcar (y perilla del switch apagado).
--ds-form-check-border-width	1px	Grosor del borde.
--ds-form-check-radius	var(--ds-radius-sm)	Radio de la casilla del checkbox.
--ds-form-check-hover-border-color	var(--ds-color-primary)	Borde en hover.
--ds-form-check-checked-bg	var(--ds-color-primary)	Fondo y borde cuando está marcado.
--ds-form-check-checked-color	var(--ds-color-primary-contrast)	Marca, punto del radio y perilla del switch encendido.
--ds-form-check-invalid-color	var(--ds-color-danger)	Borde con error (is-invalid o aria-invalid).
--ds-form-check-switch-width	2.25em	Ancho del switch.
--ds-form-check-disabled-opacity	0.5	Opacidad cuando está deshabilitado.