--- url: https://nsh.dev/elements/select description: "The Select component: one value chosen from a list of items, a popup at its trigger on desktops and a sheet on phones, with the keyboard, typeahead, search and sections, styled by the app." demo: https://nsh.dev/play/index.html#el-select --- # Select A select chooses one value from a list of items: a setting, a filter, a country, a time zone. The app's trigger opens the list, presented as each device expects: - On the desktops and in desktop browsers, a popup at the trigger, at least as wide as the trigger and as tall as its rows up to the room beside it; the keyboard moves through the items and chooses one. - On phones and tablets, a sheet at the bottom of the screen over a backdrop. The select owns the behavior: the value (the app's, or its own), the open state, the keyboard, typeahead, search, sections, the highlighted row and what screen readers hear. The look is the app's: it styles the trigger, the popup, the list, the rows, the sections' headers and the search field, or draws the rows itself. ```rust use nsh_base::{SelectItem, SelectItemState, select, theme}; use nsh_core::ui::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_style(|s| s.rounded_md().overflow_hidden()) .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: &SelectItemState| { view() .flex_row() .items_center() .justify_between() .px_2() .py_1p5() .when(item.highlighted, |v| v.bg(move || theme().accent)) .when(item.disabled, |v| v.opacity(0.5)) .child(text(item.title.clone()).text_sm()) .when(item.selected, |v| v.child(text("✓").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 ( ``` The rows are a virtualized list in the popup's scroll view: a list of thousands of items makes only the rows in view, and the popup scrolls when its rows are taller than the room it has. ## Value With `value`, the app owns the chosen item: the select shows the item of that value and reports a choice with `onChange(value)`; the app sets `value` to follow it, or keeps its own. `value={null}` is nothing chosen. Left out, the select keeps its own value, from `defaultValue` at first. `onChange` reports changes: choosing the chosen item again closes the list. `cleanable` adds a clear button while an item is chosen: a press clears the value, reported as `onChange(null)`, and the list stays closed. The button comes after the trigger in the select's view, not inside it, so a press on it never opens the list; the app places it (over the trigger's end with `absolute`, where a chevron would be) and fills it: ```tsx No time zone found} trigger={trigger} /> ``` On the desktops the search field takes the keyboard as the list opens; on touch screens the keyboard comes up when the field is pressed. Each opening starts with an empty search. ## Rows the app draws `itemClass` styles each item's row, which shows the item's title until `renderItem` draws it: `focus:` applies to the highlighted row (where the keys or the pointer are), `selected:` to the chosen one and `disabled:` to a disabled one. To draw a row, give `renderItem`: it gets the item and its state ([`SelectItemState`](#types)) and returns the row's content, for the rows in view. `renderGroup` draws a section's header the same way: ```tsx