Select

Select — mismo shell color.field.* que OrbitTextField, más un ícono chevron-down del catálogo cerrado de Orbit. El campo es de solo lectura (no se tipea), así que no tiene íconos propios ni estado de foco-mientras-se-escribe.

Uso

En web, las opciones son hijos <orbit-option> en el DOM liviano — igual de declarativo que un <select><option> nativo. <orbit-option> no es un custom element propio (no hay orbit-option.js, no se importa ni se registra aparte) — es solo una etiqueta contenedora: <orbit-select> la lee directo del DOM liviano con querySelectorAll("orbit-option"), tomando el atributo value y el texto interior como label.

AndroidiOSDesktopWeb

Web

<orbit-select label="Plataforma" placeholder="Elegí una plataforma">
  <orbit-option value="android">Android</orbit-option>
  <orbit-option value="ios">iOS</orbit-option>
  <orbit-option value="desktop">Desktop</orbit-option>
  <orbit-option value="web">Web</orbit-option>
</orbit-select>

Compose Multiplatform

var platform by remember { mutableStateOf<String?>(null) }
OrbitSelect(
    value = platform,
    onValueChange = { platform = it },
    options = listOf("android", "ios", "desktop", "web"),
    optionLabel = { it.replaceFirstChar(Char::uppercase) },
    label = "Plataforma",
    placeholder = "Elegí una plataforma",
)

Tamaños

Misma escala control.height.* que OrbitTextField.

AAA

Web

<orbit-select size="xs">...</orbit-select>
<!-- xs | sm | md | lg | xl -->

Compose Multiplatform

OrbitSelect(
    value = platform,
    onValueChange = {},
    options = options,
    size = OrbitFieldSize.Xs,
)

Estados

AAA

Web

<orbit-select placeholder="Enabled">...</orbit-select>
<orbit-select placeholder="Disabled" disabled>...</orbit-select>
<orbit-select error-text="Elegí una opción.">...</orbit-select>

Compose Multiplatform

OrbitSelect(value = null, onValueChange = {}, options = options)
OrbitSelect(
    value = null,
    onValueChange = {},
    options = options,
    enabled = false,
)
OrbitSelect(
    value = null,
    onValueChange = {},
    options = options,
    errorText = "Elegí una opción.",
)

Props

Prop	Tipo	Default	Descripción
value	T? (Kotlin, genérico) / attr value (web)	null	Valor seleccionado.
onValueChange / evento change	(T) => void	—	Se dispara al elegir una opción.
options (Kotlin) / hijos <orbit-option> (web)	List<T>	—	Opciones disponibles.
optionLabel (Kotlin)	(T) => string	toString()	Cómo renderizar cada opción.
placeholder	string?	null	Texto cuando no hay selección.
label	string?	null	Label sobre el campo.
helperText / errorText	string?	null	Igual que en OrbitTextField.
enabled / attr disabled	boolean	true	Habilita/deshabilita.
size	OrbitFieldSize / "xs" | "sm" | "md" | "lg" | "xl"	Md / "md"	Misma escala que OrbitTextField.

<orbit-option> (solo web)

No es un custom element registrado — es la etiqueta que <orbit-select> usa para leer cada opción del DOM liviano.

Atributo	Tipo	Descripción
value	string	Valor que se guarda al elegir esta opción.
contenido de texto	string	Label visible, tanto cerrado como en el menú.