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>