チェックボックスとスイッチ

チェックボックスと、オンとオフを切り替えるスイッチです。どちらも bool のシグナルに束縛します。

実行結果

checkbox.rs

use hypersig::html::{div, p};
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals, if_else};
use hypersig_ui::{checkbox, switch};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Settings {
    terms: bool,
    notifications: bool,
}

pub fn page() -> Page<Settings> {
    let notifications = Settings::notifications();
    let initial = Settings {
        terms: false,
        notifications: true,
    };
    Page::new(
        "設定",
        initial,
    )
    .child(
        div()
            .css(stack(rem(1)))
            .child(checkbox(
                "利用規約に同意する",
                Settings::terms(),
            ))
            .child(switch(
                "通知",
                notifications,
            ))
            .child(p().bind_text(if_else(
                notifications,
                "リリースのたびにメールが届きます。",
                "メールは届きません。",
            ))),
    )
}

アクセシビリティ

どちらもテキストを含む <label> の中に置いたネイティブの <input type="checkbox"> です。そのためテキストをクリックしても切り替わり、id も要りません。id が要らないので、リストの各項目のフィールドにも束縛できます。

スイッチは role="switch" を持つので、スクリーンリーダーは「チェックボックス、チェックあり」ではなく「スイッチ、オン」と読み上げます。

キー	動作
Space	チェックボックスやスイッチを切り替えます。

API

項目	概要
`checkbox`	`checked` に束縛し、`text` をラベルに持つチェックボックス
`checkbox_in_form`	`form` の `field` に束縛し、`text` をラベルに持つチェックボックス
`switch`	`on` に束縛し、`text` をラベルに持つ、オンとオフを切り替えるスイッチ
`switch_in_form`	`form` の `field` に束縛し、`text` をラベルに持つ、オンとオフを切り替えるスイッチ