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