LifeUI
1.53.2Radio Group
Conjunto de botones seleccionables en los que sólo se puede seleccionar uno a la vez.
Con labels
Para mejorar la accesibilidad y la experiencia del usuario, es recomendable usar elementos <label> que estén asociados con cada radio button. Esto permite que los usuarios hagan clic en el texto para seleccionar la opción.
Estado controlado
Utiliza las propiedades value y onValueChange para controlar el estado del radio group. Esto te permite manejar la selección y sincronizar el estado con otros componentes.
Estado deshabilitado
Puedes deshabilitar opciones individuales del radio group utilizando la propiedad disabled. Las opciones deshabilitadas no son seleccionables y tienen un estilo visual diferente.
Ejemplos
Selección de método de pago
Props
RadioGroup
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
defaultValue | string | - | El valor del elemento de Radio que debe habilitarse al renderizarse inicialmente. |
value | string | - | El valor controlado del elemento de Radio que se va a habilitar. |
onValueChange | (value: string) => void | - | Manejador de evento llamado cuando el valor cambia. |
className | string | - | Clase CSS adicional para el contenedor del radio group. |
children | ReactNode | - | Elementos Radio que forman parte del grupo. |
Radio
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
value | string | - | El valor del elemento Radio. |
disabled | boolean | - | Deshabilita el elemento Radio. |
className | string | - | Clase CSS adicional para el elemento Radio. |