日本語

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.

KeyWhat it does
The browser's keysA native <select> takes the keys of the platform, which differ between systems.

API

ItemSummary
select_fieldA select labeled title, offering options, that sets selected to the chosen option's value.
select_field_in_formA select labeled title, offering options, bound to field of form.