pub fn select_field<S, T: Serialize + PartialEq, L: Into<String>>(
title: impl Into<String>,
selected: Sig<S, T>,
options: impl IntoIterator<Item = (T, L)>,
) -> El<S>Expand description
A select labeled title, offering options, that sets selected to the
chosen option’s value.
It is a native <select>, which a screen reader, a keyboard, and a
phone’s picker wheel already handle. The closed control is drawn like a
text field with a chevron. Where the browser supports
appearance: base-select and ::picker(select), which
browser-compat-data 8.1.6 lists for Chrome 135 and Safari 27, the open
list is drawn as a popover card too. Elsewhere it is the browser’s own
picker. The label’s for is derived from the signal’s path.
use hypersig::Signals;
use hypersig_ui::select_field;
use serde::{Deserialize, Serialize};
#[derive(Serialize, Deserialize, Clone, Copy, PartialEq)]
enum Region {
Tokyo,
Osaka,
}
#[derive(Signals, Serialize, Deserialize)]
struct Deploy {
region: Region,
}
let region = select_field(
"Region",
Deploy::region(),
[(Region::Tokyo, "Tokyo"), (Region::Osaka, "Osaka")],
);
assert!(region.render().contains(r#"for="ui-region-select""#));