Select
A select that sets a signal to the chosen option's value.
Result
select.rs
use hypersig::html::div;
use hypersig::style::Style;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::select_field;
use serde::{Deserialize, Serialize};
#[derive(Serialize, Deserialize, Clone, Copy, PartialEq)]
pub enum Region {
Tokyo,
Frankfurt,
Virginia,
}
#[derive(Signals, Serialize, Deserialize)]
pub struct Deploy {
region: Region,
}
pub fn page() -> Page<Deploy> {
Page::new(
"Deploy",
Deploy {
region: Region::Tokyo,
},
)
.child(
div()
.css(Style::new().max_width(rem(16)))
.child(select_field(
"Region",
Deploy::region(),
[
(
Region::Tokyo,
"Tokyo",
),
(
Region::Frankfurt,
"Frankfurt",
),
(
Region::Virginia,
"Virginia",
),
],
)),
)
}Accessibility
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.
| Key | What it does |
|---|---|
| The browser's keys | A native <select> takes the keys of the platform, which differ between systems. |
API
| Item | Summary |
|---|---|
select_field | A select labeled title, offering options, that sets selected to the chosen option's value. |
select_field_in_form | A select labeled title, offering options, bound to field of form. |