Selectores
Radio Group
Un componente de grupo de radio basado en tarjetas construido sobre HeadlessUI para seleccionar una opción de una lista de tarjetas visualmente ricas.
Uso
El componente SRadioGroup envuelve el RadioGroup de HeadlessUI para proporcionar una interfaz de selección basada en tarjetas. Usa SRadioGroupItem dentro para definir cada opción con título, descripción y pie de página.
Simple
Usa SRadioGroupItem solo con el slot de título para tarjetas de selección minimalistas sin descripciones ni pies de página.
Deshabilitado
Usa el prop disabled en SRadioGroup para deshabilitar todas las opciones a la vez, impidiendo cualquier interacción del usuario.
Elemento Deshabilitado
Usa el prop disabled en componentes SRadioGroupItem individuales para deshabilitar opciones específicas mientras el resto permanece interactivo.
Props de SRadioGroup
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
modelValue | string | - | El valor actualmente seleccionado. Requerido. |
disabled | boolean | false | Deshabilita todos los elementos del grupo de radio, impidiendo la interacción del usuario. |
Eventos de SRadioGroup
| Evento | Payload | Descripción |
|---|---|---|
update:modelValue | string | Se emite cuando la opción seleccionada cambia. |
Slots de SRadioGroup
| Nombre | Descripción |
|---|---|
default | Contenedor para los componentes SRadioGroupItem. |
Props de SRadioGroupItem
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
value | string | - | El valor que esta opción representa. Requerido. Debe ser único dentro del grupo. |
disabled | boolean | false | Deshabilita esta opción específica, impidiendo la interacción del usuario. |
Slots de SRadioGroupItem
| Nombre | Descripción |
|---|---|
title | La etiqueta principal de la opción. |
description | Texto descriptivo adicional debajo del título. |
footer | Contenido del pie, típicamente usado para precios o metadatos. |