Radio

Estilo relleno: al seleccionar, todo el círculo se llena con color.primary.on-light-text (lima en oscuro, navy en claro — mismo token que usan OrbitNavItem/OrbitTabs) en vez de solo dibujar un anillo con un punto chico adentro, con un punto interno en color.primary.on-navy-text encima para contraste (oscuro sobre lima en modo oscuro, claro sobre navy en modo claro — mismo par que usa el thumb marcado de OrbitSwitch). Disabled ignora selected para el color del anillo/relleno — siempre text.disabled, sin importar si estaba marcado; el punto interno sí se sigue mostrando (en field.background) para no perder la referencia de cuál estaba seleccionado antes de deshabilitarse.

Uso

OrbitRadio funciona solo, sin necesitar un grupo — selected/ onClick (web: checked/evento change) controlan su propio estado, como cualquier otro control booleano.

Web

<orbit-radio label="Acepto los términos"></orbit-radio>

Compose Multiplatform

var accepted by remember { mutableStateOf(false) }
OrbitRadio(
    selected = accepted,
    onClick = { accepted = !accepted },
    label = "Acepto los términos",
)

Estados

Web

<orbit-radio label="Enabled"></orbit-radio>
<orbit-radio label="Selected" checked></orbit-radio>
<orbit-radio label="Disabled" disabled></orbit-radio>
<orbit-radio label="Disabled selected" checked disabled></orbit-radio>

Compose Multiplatform

OrbitRadio(selected = false, onClick = {}, label = "Enabled")
OrbitRadio(selected = true, onClick = {}, label = "Selected")
OrbitRadio(
    selected = false,
    onClick = {},
    label = "Disabled",
    enabled = false,
)
OrbitRadio(
    selected = true,
    onClick = {},
    label = "Disabled selected",
    enabled = false,
)

Grupo

OrbitRadioGroup es el caso común: orquesta la selección mutuamente excluyente entre un set de opciones — mismo patrón que OrbitCardGroup. En web, <orbit-radio-group> da spacing consistente, propaga name a sus hijos y fuerza la exclusividad a mano: cada <orbit-radio> renderiza su <input type="radio"> dentro de su propio Shadow DOM, así que el agrupamiento nativo por name no cruza esos límites — al marcar uno, el grupo desmarca los demás explícitamente.

Web

<orbit-radio-group name="platform">
  <orbit-radio value="android" label="Android"></orbit-radio>
  <orbit-radio value="ios" label="iOS" checked></orbit-radio>
  <orbit-radio value="desktop" label="Desktop"></orbit-radio>
</orbit-radio-group>

Compose Multiplatform

var platform by remember { mutableStateOf("ios") }
OrbitRadioGroup(
    options = listOf("android", "ios", "desktop"),
    selected = platform,
    onSelectedChange = { platform = it },
    optionLabel = { it.replaceFirstChar(Char::uppercase) },
)

Por defecto el grupo se apila vertical — pasa orientation="horizontal" (web) / orientation = OrbitRadioGroupOrientation.Horizontal (Kotlin) para ponerlo en fila.

Web

<orbit-radio-group name="platform" orientation="horizontal">
  <orbit-radio value="android" label="Android"></orbit-radio>
  <orbit-radio value="ios" label="iOS" checked></orbit-radio>
  <orbit-radio value="desktop" label="Desktop"></orbit-radio>
</orbit-radio-group>

Compose Multiplatform

OrbitRadioGroup(
    options = listOf("android", "ios", "desktop"),
    selected = platform,
    onSelectedChange = { platform = it },
    optionLabel = { it.replaceFirstChar(Char::uppercase) },
    orientation = OrbitRadioGroupOrientation.Horizontal,
)

Props

OrbitRadio

Prop	Tipo	Default	Descripción
selected / attr checked	boolean	—	Estado actual.
onClick / evento change	() => void	—	Se dispara al seleccionar.
label	string?	null	Texto junto al radio.
enabled / attr disabled	boolean	true	Habilita/deshabilita.

OrbitRadioGroup (Kotlin) / orbit-radio-group (web)

Prop	Tipo	Default	Descripción
options (Kotlin) / hijos <orbit-radio> (web)	List<T>	—	Opciones del grupo.
selected	T?	—	Valor seleccionado.
onSelectedChange / evento orbit-change	(T) => void	—	Se dispara al cambiar la selección.
optionLabel (Kotlin)	(T) => string	toString()	Cómo renderizar cada opción.
enabled (Kotlin) / attr disabled (web)	boolean	true	Deshabilita todo el grupo.
orientation / attr orientation	OrbitRadioGroupOrientation (web: "vertical" | "horizontal")	Vertical	Apila las opciones o las pone en fila.