Skip to main content

select_field

Function select_field 

Source
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""#));