Radio button

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Selección única en formularios. Usa el bloque BEM .cl-radio del Kit Digital.

Básico

<label class="cl-radio">
  <input class="cl-radio__input" type="radio" name="radio-example" />
  <span class="cl-radio__control" aria-hidden="true"></span>
  <span class="cl-radio__text">Texto de ejemplo</span>
</label>

Seleccionado

<label class="cl-radio">
  <input class="cl-radio__input" type="radio" name="radio-example" checked />
  <span class="cl-radio__control" aria-hidden="true"></span>
  <span class="cl-radio__text">Texto de ejemplo</span>
</label>

Grupo

<div class="cl-choice-field" role="group" aria-labelledby="cl-radio-group-label">
  <div class="cl-choice-field__question">
    <p class="cl-choice-field__label" id="cl-radio-group-label">Label</p>
    <p class="cl-choice-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-choice-field__options">
    <label class="cl-radio">
      <input class="cl-radio__input" type="radio" name="radio-group" />
      <span class="cl-radio__control" aria-hidden="true"></span>
      <span class="cl-radio__text">Texto de ejemplo</span>
    </label>
    <label class="cl-radio">
      <input class="cl-radio__input" type="radio" name="radio-group" />
      <span class="cl-radio__control" aria-hidden="true"></span>
      <span class="cl-radio__text">Texto de ejemplo</span>
    </label>
    <label class="cl-radio">
      <input class="cl-radio__input" type="radio" name="radio-group" checked />
      <span class="cl-radio__control" aria-hidden="true"></span>
      <span class="cl-radio__text">Texto de ejemplo</span>
    </label>
  </div>
</div>

Error

<div class="cl-choice-field cl-choice-field--error" role="group" aria-labelledby="cl-radio-error-label">
  <div class="cl-choice-field__question">
    <p class="cl-choice-field__label" id="cl-radio-error-label">Label</p>
    <p class="cl-choice-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-choice-field__options">
    <label class="cl-radio">
      <input class="cl-radio__input" type="radio" name="radio-error" />
      <span class="cl-radio__control" aria-hidden="true"></span>
      <span class="cl-radio__text">Texto de ejemplo</span>
    </label>
    <label class="cl-radio">
      <input class="cl-radio__input" type="radio" name="radio-error" />
      <span class="cl-radio__control" aria-hidden="true"></span>
      <span class="cl-radio__text">Texto de ejemplo</span>
    </label>
  </div>
  <p class="cl-choice-field__hint">Debes seleccionar una opción</p>
</div>