Links

Radio button

Los Radio button son elementos en un conjunto de opciones donde se debe hacer una única selección.

Racional de aplicación

Un grupo de Radio buttons deja en claro que solo se puede seleccionar una opción de las mostradas. Es necesario agregar suficiente contexto para que se tengan todo lo que necesitan para tomar una decisión informada.
  • Se usan para elegir una única opción entre pequeños grupos de posibilidades.
  • No se utilizan más de 5/6 opciones posibles.
  • La etiqueta de grupo debe ser clara para ayudar a tomar la decisión acertada.
  • Las etiquetas de opción deben ser concisas para evitar dudas o confusiones.

Buenas prácticas

Uso correcto
Uso incorrecto
Acompañamos al grupo de opciones con una etiqueta suficientemente clara que se elija la opción apropiada.
Las opciones por sí solas sin etiqueta no aportan información suficiente para la elección.
Las opciones deben ser excluyentes para hacer un buen uso de este componente.
Las opciones no son excluyentes.

Interacción

Este componente ha sido validado para cumplir con las pautas de accesibilidad WCAG 2.1 AA, sin embargo los cambios realizados por el propietario del contenido pueden afectar el cumplimiento de la accesibilidad. Hay que asegurarse de revisar y seguir las instrucciones de esta sección cuando se actualice o se agregue contenido nuevo a este componente.
Dispositivo
Interacción
Ratón
Se puede activar un Radio button haciendo clic en cualquier lugar dentro de la casilla de verificación o la etiqueta.
Teclado
Se puede utilizar el tabulador para desplazarse por las opciones de forma secuencial y activar o desactivar con la barra espaciadora.

Anatomía y variabilidad

Anatomía del componente

Letra
Elemento
Descripción
A
Etiqueta de grupo
Se aconseja que los grupos de opciones vayan acompañados de una etiqueta identificativa que dé contexto a la selección.
B
Casilla de verificación
Indica si la opción está seleccionada.
C
Etiqueta
Describe la información de la opción.

Variabilidad de estados

Letra
Estado
Descripción
A
Unchecked
Estado por defecto.
B
Checked
La opción ha sido seleccionada.
C
Disabled
La opción no está disponible para ser seleccionada.
D
Read Only
Estado de solo lectura. Esto permite copiar el contenido, pero no interactuar con él ni cambiarlo.

Instalación

npm i --save @plural-wc/radio-button
// or
yarn add @plural-wc/radio-button
import { PluralRadioButton } from '@plural-wc/radio-button';
// or
import '@plural-wc/radio-button/plural-radio-button.js';

Uso

Uso básico

<lion-radio-group name="radios">
<plural-radio-button label="Default" .choiceValue=${'Default'}></plural-radio-button>
</lion-radio-group>

Checked

<lion-radio-group name="radios">
<plural-radio-button label="Checked" .choiceValue=${'Checked'} checked></plural-radio-button>
</lion-radio-group>

Disabled

<lion-radio-group name="radios">
<plural-radio-button label="Disabled" .choiceValue=${'Disabled'} disabled></plural-radio-button>
</lion-radio-group>

Read only

<lion-radio-group name="radios">
<plural-radio-button label="Read only" .choiceValue=${'Read only'} disabled checked></plural-radio-button>
</lion-radio-group>
Última actualización 1yr ago