OrbitSelect

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.

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.