Checkbox

Caja de 18px, tamaño fijo — a diferencia de botón/campo, los checkboxes no escalan con OrbitFieldSize. El relleno al marcar es color.primary.on-light-text (lima en oscuro, navy en claro — mismo token que usan OrbitRadio/OrbitNavItem/OrbitTabs), con el check en color.primary.on-navy-text encima para contraste (oscuro sobre lima en modo oscuro, blanco sobre navy en modo claro) — se invierte a una caja navy con check blanco en claro en vez de un lima crudo que ahí se ve muy fuerte.

Uso

Web

<orbit-checkbox label="Generar tests" checked></orbit-checkbox>
<orbit-checkbox label="Publicar en ambas plataformas"></orbit-checkbox>

Compose Multiplatform

var checked by remember { mutableStateOf(true) }
OrbitCheckbox(
    checked = checked,
    onCheckedChange = { checked = it },
    label = "Generar tests",
)

Estados

Web

<orbit-checkbox label="Enabled"></orbit-checkbox>
<orbit-checkbox label="Checked" checked></orbit-checkbox>
<orbit-checkbox label="Disabled" disabled></orbit-checkbox>
<orbit-checkbox label="Disabled checked" checked disabled></orbit-checkbox>
<orbit-checkbox label="Error" error></orbit-checkbox>
<orbit-checkbox label="Error + checked" checked error></orbit-checkbox>

Compose Multiplatform

OrbitCheckbox(checked = false, onCheckedChange = {}, label = "Enabled")
OrbitCheckbox(checked = true, onCheckedChange = {}, label = "Checked")
OrbitCheckbox(
    checked = false,
    onCheckedChange = {},
    label = "Disabled",
    enabled = false,
)
OrbitCheckbox(
    checked = true,
    onCheckedChange = {},
    label = "Disabled checked",
    enabled = false,
)
OrbitCheckbox(
    checked = false,
    onCheckedChange = {},
    label = "Error",
    error = true,
)
OrbitCheckbox(
    checked = true,
    onCheckedChange = {},
    label = "Error + checked",
    error = true,
)

Disabled ignora checked para el color del relleno — siempre text.disabled, sin importar si estaba marcado — pero el check se sigue mostrando en field.background para no perder la referencia de cuál estaba marcado antes de deshabilitarse (mismo razonamiento que el punto interno de OrbitRadio disabled). Marcado + error rellena sólido con field.border-error en vez del color de marca — borde y relleno siempre coinciden, nunca un borde rojo sobre una caja de otro color.

Props

Prop	Tipo	Default	Descripción
checked	boolean	—	Estado actual.
onCheckedChange / evento change	(boolean) => void	—	Se dispara al hacer click/Enter/Espacio.
label	string?	null	Texto junto a la caja.
enabled / attr disabled	boolean	true	Habilita/deshabilita.
error	boolean	false	Pinta el borde con field.border-error; si además está marcado, rellena la caja entera con ese mismo rojo en vez del color de marca.