Toggle

Componente de control se usa para cambiar rápidamente entre dos estados posibles, comúnmente para acciones de 〝encendido / apagado〞.

Se deben utilizar literales claros y concisos. Han de ser textos explícitos sobre la acción que seguirá si se realiza la selección. Las etiquetas aparecen siempre a la derecha del toggle.

Variaciones y tipos

Diferenciamos entre simple toggle y toggle text.

Simple Toggle

Elemento de interacción para una toma de decisión que puede ir acompañado de un label o no, según el contexto de uso.

Demo en vivo

<fieldset>
  <div class="rds-mb-l03">
    <input class="rds-toggle" id="toggle0" type="checkbox">
    <label class="rds-toggle__label" for="toggle0" aria-label="Toggle example label text">
      <span class="rds-toggle__switch"></span>
    </label>
  </div>
  <div class="rds-mb-l03">
    <input class="rds-toggle" id="toggle1" type="checkbox" checked>
    <label class="rds-toggle__label" for="toggle1" aria-label="Toggle example label text">
      <span class="rds-toggle__switch"></span>
    </label>
  </div>
  <div class="rds-mb-l03">
    <input class="rds-toggle" id="toggle2" type="checkbox" disabled>
    <label class="rds-toggle__label" for="toggle2" aria-label="Toggle example label text for disabled">
      <span class="rds-toggle__switch"></span>
    </label>
  </div>
  <div class="rds-mb-l03">
    <input class="rds-toggle" id="toggle3" type="checkbox">
    <label class="rds-toggle__label" for="toggle3">
      Unselected default with label text
      <span class="rds-toggle__switch"></span>
    </label>
  </div>
  <div class="rds-mb-l03">
    <input class="rds-toggle" id="toggle4" type="checkbox" checked>
    <label class="rds-toggle__label" for="toggle4">
      Selected default with label text
      <span class="rds-toggle__switch"></span>
    </label>
  </div>
  <div class="rds-mb-l03">
    <input class="rds-toggle" id="toggle5" type="checkbox" disabled checked>
    <label class="rds-toggle__label" for="toggle5">
      Selected disabled with label text
      <span class="rds-toggle__switch"></span>
    </label>
  </div>
</fieldset>

Toggle Text

Esta versión de toggle que siempre lleva un literal asociado al contenido que aparece según interactúas con él.

Demo en vivo

Default

Disabled

<p class="rds-title-2 rds-mb-l03">Default</p>
<div class="rds-toggle-text rds-mb-l03">
  <input class="rds-toggle-text__input" id="toggle-text0" type="radio" name="toggle-text0" checked>
  <label class="rds-toggle-text__label" for="toggle-text0">Button</label>
  <input class="rds-toggle-text__input" id="toggle-text1" type="radio" name="toggle-text0">
  <label class="rds-toggle-text__label" for="toggle-text1">Button</label>
</div>
<p class="rds-title-2 rds-mb-l03">Disabled</p>
<div class="rds-toggle-text rds-mb-l03">
  <input class="rds-toggle-text__input" id="toggle-text3" type="radio" name="toggle-text3" checked disabled>
  <label class="rds-toggle-text__label" for="toggle-text3">Button</label>
  <input class="rds-toggle-text__input" id="toggle-text4" type="radio" name="toggle-text3" disabled>
  <label class="rds-toggle-text__label" for="toggle-text4">Button</label>
</div>

Estados

  • Unselected Default
    Su estado por defecto.
  • Unselected Disabled
    El usuario no ha tomado interactuado con el Toggle, pero esta toma de decisón está bloqueda para él.
  • Selected Default
    Estado seleccionado por defecto.
  • Selected Disabled
    Estado seleccionado que no puede ser modificado por el usuario.