--- url: https://nsh.dev/pt-BR/elements/select description: "O componente Select: um valor escolhido a partir de uma lista de itens, com um popup junto ao seu gatilho em desktops e uma sheet em celulares, com suporte a teclado, typeahead, busca e seções, estilizado pelo app." demo: https://nsh.dev/play/index.html#el-select --- # Select Um select escolhe um valor de uma lista de itens: uma configuração, um filtro, um país, um fuso horário. O gatilho do app abre a lista, apresentada da forma que cada dispositivo espera: - Nos desktops e nos navegadores desktop, um popup sobre o gatilho, com a linha selecionada sobreposta ao gatilho, de modo que o título escolhido permaneça onde estava (a posição `item-aligned` do shadcn/ui), tão largo quanto o gatilho (a largura definida por `popupStyle` / `popupClass` no app estabelece outra, como em `gpui-component`, com `menu_width`) e tão alto quanto suas linhas, até o espaço disponível na tela; sem nenhum item selecionado, ele abre abaixo do gatilho. O teclado percorre os itens e escolhe um. - Em celulares e tablets, uma sheet na parte inferior da tela, sobre um backdrop. O select é dono do comportamento: o valor (o do app ou o próprio), o estado aberto, o teclado, o typeahead, a busca, as seções, a linha destacada e o que os leitores de tela anunciam. A aparência é do app: ele estiliza o gatilho, o popup, a lista, as linhas, os cabeçalhos das seções e o campo de busca, ou desenha as linhas por conta própria. ```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 ( ``` As linhas são uma lista virtualizada na scroll view do popup: uma lista com milhares de itens cria apenas as linhas visíveis, e o popup rola quando suas linhas são mais altas que o espaço disponível. ## Valor Com `value`, o app é dono do item escolhido: o select mostra o item desse valor e informa uma escolha com `onChange({ value })`; o app define `value` para acompanhá-la, ou mantém o seu próprio. `value={null}` significa nada escolhido. Se omitido, o select mantém seu próprio valor, a partir de `defaultValue` no início. `onChange` informa as mudanças: escolher novamente o item já escolhido fecha a lista. `cleanable` adiciona um botão de limpar enquanto um item está escolhido: um toque limpa o valor, informado como `onChange({ value: null })`, e a lista permanece fechada. O botão vem depois do gatilho na view do select, não dentro dele, de modo que um toque nele nunca abre a lista; o app o posiciona (sobre o fim do gatilho com `absolute`, onde ficaria um chevron) e o preenche: ```tsx No time zone found} trigger={trigger} /> ``` Nos desktops, o campo de busca recebe o teclado assim que a lista abre; em telas sensíveis ao toque, o teclado aparece quando o campo é tocado. Cada abertura começa com a busca vazia. ## Linhas desenhadas pelo app `itemClass` estiliza a linha de cada item, que mostra o título do item até que `renderItem` a desenhe: `focus:` se aplica à linha destacada (onde estão as teclas ou o ponteiro), `selected:` à escolhida e `disabled:` à desabilitada. Para desenhar uma linha, forneça `renderItem`: ele recebe o que o item é ([`SelectEntry`](#types)) e retorna o conteúdo da linha, para as linhas visíveis. Ele nunca recebe o estado da linha: com `group` em `itemClass`, o conteúdo acompanha os estados da linha por meio das classes `group-focus:`, `group-selected:` e `group-disabled:`, de modo que o desenho é feito uma vez por item e mover o destaque ou escolher não redesenha nada. `renderGroup` desenha o cabeçalho de uma seção da mesma forma: ```tsx