# Cómo usar un Dropdown de selección

> Abrir una lista desplegable, reaccionar a la elección y obtener el elemento seleccionado.

Source: https://crossfly.dev/es/docs/cookbook/ui/dropdown-selecao — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Cómo usar un Dropdown de selección

**Propósito.** Ofrecer selección única a partir de una lista de elementos, mostrada como un
botón con flecha que abre un popup (`ListViewWindow`) al toque. Tras elegir, el texto del
Dropdown pasa a mostrar el elemento seleccionado. Úsalo para elegir entre pocas/medias
opciones sin ocupar espacio fijo en la pantalla.

## APIs usadas
- `new Dropdown(String placeholder, String[] items)` — crea el dropdown con un texto de placeholder y el array de elementos.
- `new Dropdown(String[] items)` — variante con placeholder por defecto `"Select..."`.
- `dropdown.onSelect(Component.Action action)` — callback disparado **después** de que el usuario confirme la elección en el popup.
- `dropdown.getSelectedIndex()` — índice del elemento seleccionado, o `-1` si ninguno.
- `dropdown.getSelectedText()` — texto del elemento seleccionado, o `null` si ninguno.
- `dropdown.setSelectedIndex(int index)` — selecciona programáticamente y actualiza el texto mostrado.
- `dropdown.popupHeightRatio(float)` / `dropdown.popupWidthRatio(float)` — ajustan el tamaño del popup relativo a la pantalla.

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      String[] estados = { "Acre", "Bahia", "São Paulo", "Paraná" };

      Dropdown uf = new Dropdown("Selecione o estado", estados);

      uf.onSelect(origin ->
      {
         int i = uf.getSelectedIndex();       // -1 si nada elegido
         String texto = uf.getSelectedText(); // null si nada elegido
         filtrarPorEstado(texto);
      });

      // Preselección programática (opcional)
      uf.setSelectedIndex(2);   // "São Paulo"

      add(0.5f, uf);            // media anchura en la fila (GridLayout)
   }

   private void filtrarPorEstado(String estado)
   {
      // ... filtrar la lista según el estado elegido ...
   }
}
```

> El fragmento de abajo muestra **solo el núcleo**. Para ejecutarlo, colócalo en el esqueleto `MainWindow` de arriba.

## Fragmento mínimo
```java
String[] estados = { "Acre", "Bahia", "São Paulo", "Paraná" };

Dropdown uf = new Dropdown("Selecione o estado", estados);

uf.onSelect(origin ->
{
   int i = uf.getSelectedIndex();       // -1 si nada elegido
   String texto = uf.getSelectedText(); // null si nada elegido
   filtrarPorEstado(texto);
});

// Preselección programática (opcional)
uf.setSelectedIndex(2);   // "São Paulo"

add(0.5f, uf);            // media anchura en la fila (GridLayout)
```

> **Nota de verificación (código 2026).** Confirmado en la fuente: `Dropdown` extiende `Button`;
> constructores `Dropdown(String placeholder, String[] items)` y `Dropdown(String[] items)`;
> `onSelect(Action)`, `getSelectedIndex()`, `getSelectedText()`, `setSelectedIndex(int)`.
> El popup decide por sí solo si se abre **arriba o abajo** del dropdown según el espacio
> disponible en la pantalla, y se cierra al tocar fuera. El callback `onSelect` se ejecuta **después** de que el
> `selectedIndex`/`text` ya hayan sido actualizados, por lo que es seguro llamar a
> `getSelectedText()` dentro de él.

## Profundiza
- Página del widget: [Dropdown](/docs/ui/widgets/dropdown) · Fuente canónica: Capítulo 14
- Selección única/múltiple con marcadores: [checkbox-e-radio.md](/docs/cookbook/ui/checkbox-e-radio)