Skip to content
Plural DS
More
Componentes
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.
Anatomía
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.
There are no rows in this table
Interacción
Este componente ha sido validado para cumplir con las pautas de accesibilidad , 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.
There are no rows in this table
Variabilidad de estados
Letra
Estado
Descripción
A
Unchecked
Estado por defecto.
B
Hover
Cuando el cursor se posiciona encima.
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.
E
Error
Cuando se produce un resultado inesperado.
There are no rows in this table
Buenas prácticas
Do’s
Acompañamos al grupo de opciones con una etiqueta suficientemente clara que se elija la opción apropiada.
Dont’s
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.
Instalación
npm i --save @plural-wc/radio-button
// or
yarn add @plural-wc/radio-button
import { PluralRadioButton } from '@plural-wc/radio-button';// orimport '@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>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.