Radio button
Los Radio button son elementos en un conjunto de opciones donde se debe hacer una única selecció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.
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. |
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. |
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. |
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. |
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';
<lion-radio-group name="radios">
<plural-radio-button label="Default" .choiceValue=${'Default'}></plural-radio-button>
</lion-radio-group>
<lion-radio-group name="radios">
<plural-radio-button label="Checked" .choiceValue=${'Checked'} checked></plural-radio-button>
</lion-radio-group>
<lion-radio-group name="radios">
<plural-radio-button label="Disabled" .choiceValue=${'Disabled'} disabled></plural-radio-button>
</lion-radio-group>
<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