Formularios
Los selectores en radio permiten seleccionar una única opción entre varias disponibles.
<vadavo-radio-group> es el elemento que participa en FormData: envuelve varios <vadavo-radio value="...">, cada uno con su texto entre etiquetas, y controla cuál está seleccionado (su propio atributo value), el foco y la navegación con flechas entre ellos. Cada vadavo-radio solo pinta su propio círculo; nunca participa en el formulario por sí solo.
El grupo acepta las variantes layout="vertical" y prominence.
<vadavo-radio-group name="phone-action" value="register">
<vadavo-radio value="register">Número nuevo</vadavo-radio>
<vadavo-radio value="transfer">Portabilidad</vadavo-radio>
<vadavo-radio value="stack" disabled>Número nuevo desde un stack</vadavo-radio>
<vadavo-radio value="provided" disabled>Número nuevo provisto</vadavo-radio>
</vadavo-radio-group>layout="vertical" en el grupo muestra las opciones en columna.
<vadavo-radio-group name="vert-phone-action" value="register" layout="vertical">
<vadavo-radio value="register">Número nuevo</vadavo-radio>
<vadavo-radio value="transfer">Portabilidad</vadavo-radio>
<vadavo-radio value="stack" disabled>Número nuevo desde un stack</vadavo-radio>
</vadavo-radio-group>prominence destaca el grupo: cada opción se muestra como una fila con su propio borde, y la seleccionada se resalta.
<vadavo-radio-group name="domain-action" value="register" prominence>
<vadavo-radio value="register">Registrar</vadavo-radio>
<vadavo-radio value="transfer">Transferir</vadavo-radio>
<vadavo-radio value="own" disabled>Ya tengo uno</vadavo-radio>
</vadavo-radio-group>| Token | Qué es |
|---|---|
--radio--border--card | El borde (grosor, tipo y color) de la opción cuando se presenta como tarjeta. |
--radio--radius--card | El radio de borde de la opción cuando se presenta como tarjeta. |
--radio--padding--card | El relleno interior (padding) de la opción cuando se presenta como tarjeta. |
--radio--transform--card-hover | El desplazamiento (transform) de la opción presentada como tarjeta al apuntarla. |
--radio--border--card-checked | El color del borde de la opción presentada como tarjeta cuando está marcada. |
--radio--background--card-checked | El color de fondo de la opción presentada como tarjeta cuando está marcada. |