--- url: https://nsh.dev/es/elements/select description: "El componente Select: un valor elegido de una lista de elementos, con un popup junto a su disparador en escritorio y una hoja (sheet) en teléfonos, con teclado, búsqueda por escritura (typeahead), búsqueda y secciones, y con el estilo definido por la aplicación." demo: https://nsh.dev/play/index.html#el-select --- # Select Un select elige un valor de una lista de elementos: un ajuste, un filtro, un país, una zona horaria. El disparador de la app abre la lista, presentada como cada dispositivo espera: - En escritorio y en navegadores de escritorio, un popup sobre el disparador con la fila seleccionada colocada encima de él, de modo que el título elegido se queda donde estaba (la posición `item-aligned` de shadcn/ui), tan ancho como el disparador (un ancho de la app con `popupStyle` / `popupClass` fija otro, como `menu_width` de `gpui-component`) y tan alto como sus filas hasta el espacio disponible en pantalla; sin nada seleccionado se abre debajo del disparador. El teclado se mueve por los elementos y elige uno. - En teléfonos y tabletas, una hoja en la parte inferior de la pantalla sobre un fondo. El select es dueño del comportamiento: el valor (el de la app o el suyo propio), el estado abierto, el teclado, la búsqueda por tecleo, la búsqueda, las secciones, la fila resaltada y lo que oyen los lectores de pantalla. El aspecto es de la app: da estilo al disparador, al popup, a la lista, a las filas, a los encabezados de las secciones y al campo de búsqueda, o dibuja ella misma las filas. ```rust use nsh_base::{SelectEntry, SelectItem, select, theme}; use nsh_core::prelude::*; const FRUITS: [(&str, &str); 5] = [ ("apple", "Apple"), ("banana", "Banana"), ("blueberry", "Blueberry"), ("grapes", "Grapes"), ("pineapple", "Pineapple"), ]; fn fruit_select() -> impl IntoElement { let fruit = signal(None::); let title = move || { let chosen = fruit.get(); FRUITS .iter() .find(|(value, _)| Some(*value) == chosen.as_deref()) .map_or("Pick a fruit", |(_, title)| *title) .to_string() }; select() .items( FRUITS .iter() .map(|&(value, title)| SelectItem::new(value, title).disabled(value == "grapes")) .collect::>(), ) .value(move || fruit.get()) .on_change(move |next: &Option| fruit.set(next.clone())) .accessibility_label("Fruit") .offset(px(4.0)) .popup_style(|s| { s.p_1() .rounded_lg() .border_1() .border_color(move || theme().border) .bg(move || theme().popover) .text_color(move || theme().popover_foreground) .shadow_md() }) .item_class("rounded-md focus:bg-accent selected:font-medium disabled:opacity-50") .trigger( view() .h_9() .w_48() .flex_row() .items_center() .justify_between() .px_3() .rounded_md() .border_1() .border_color(move || theme().input) .hover(|s| s.bg(move || theme().accent)) .child(text(title)) .child(text("▾").text_color(move || theme().muted_foreground)), ) .render_item(|item: &SelectEntry| { view() .flex_row() .items_center() .px_2() .py_1p5() .child(text(item.title.clone()).text_sm()) }) } ``` ```tsx import { mount, signal, Text, View } from "nsh"; import { Select } from "nsh/base"; const FRUITS = [ { value: "apple", title: "Apple" }, { value: "banana", title: "Banana" }, { value: "blueberry", title: "Blueberry" }, { value: "grapes", title: "Grapes", disabled: true }, { value: "pineapple", title: "Pineapple" }, ]; function App() { const fruit = signal(null); const title = () => FRUITS.find((f) => f.value === fruit())?.title; return ( ``` Las filas son una lista virtualizada dentro de la vista de desplazamiento del popup: una lista de miles de elementos solo crea las filas visibles, y el popup se desplaza cuando sus filas son más altas que el espacio disponible. ## Valor Con `value`, la app es dueña del elemento elegido: el select muestra el elemento de ese valor e informa de una elección con `onChange({ value })`; la app establece `value` para seguirla, o mantiene el suyo. `value={null}` significa que no hay nada elegido. Si se omite, el select mantiene su propio valor, a partir de `defaultValue` al principio. `onChange` informa de los cambios: elegir de nuevo el elemento ya elegido cierra la lista. `cleanable` añade un botón de borrado mientras hay un elemento elegido: al pulsarlo se borra el valor, lo que se notifica como `onChange({ value: null })`, y la lista permanece cerrada. El botón va después del disparador en la vista del select, no dentro de él, de modo que pulsarlo nunca abre la lista; la app lo coloca (sobre el extremo del disparador con `absolute`, donde iría un chevron) y lo rellena: ```tsx No time zone found} trigger={trigger} /> ``` En escritorio, el campo de búsqueda toma el teclado al abrirse la lista; en pantallas táctiles, el teclado aparece al pulsar el campo. Cada apertura empieza con una búsqueda vacía. ## Filas que dibuja la app `itemClass` da estilo a la fila de cada elemento, que muestra el título del elemento hasta que `renderItem` la dibuja: `focus:` se aplica a la fila resaltada (donde están las teclas o el puntero), `selected:` a la elegida y `disabled:` a una deshabilitada. Para dibujar una fila, indica `renderItem`: recibe lo que es el elemento ([`SelectEntry`](#types)) y devuelve el contenido de la fila, para las filas visibles. Nunca recibe el estado de la fila: con `group` en `itemClass`, el contenido sigue los estados de la fila con las clases `group-focus:`, `group-selected:` y `group-disabled:`, de modo que el dibujo se hace una vez por elemento y un movimiento del resaltado o una elección no vuelve a dibujar nada. `renderGroup` dibuja el encabezado de una sección de la misma manera: ```tsx