Native UI Book · 03 Inputs & Forms

输入框、开关与滑块 (Inputs, Switch & Sliders)

支持中日韩 (CJK) 原生输入法候选窗定位、双向剪贴板、密码掩码与数值滑块的表单组件。

表单组件预览

Form Controls — IME & Accessibility Ready

🔍 Search 10,000 items...

启用 VSync 帧同步 ON

响应式表单与开关绑定 (`gpux::kit::switch` & `Store<T>`)

表单控件可直接与 Store<T> 状态双向绑定，在切换时零拷贝更新配置并通知 GPUI 重绘脏区域：

rust

use gpux::prelude::*;
use gpux::kit::switch::Switch;
use gpux::kit::{h_flex, v_flex, ActiveTheme, Sizable, StyledExt};

pub fn render_telemetry_preferences(&mut self, cx: &mut Context<Self>) -> impl IntoElement {
    let high_freq = self.prefs_store.get().high_frequency_sampling;

    v_flex()
        .p_4()
        .gap_3()
        .rounded_lg()
        .border_1()
        .border_color(cx.theme().border)
        .child(
            h_flex()
                .justify_between()
                .items_center()
                .child("High-Frequency GPU Telemetry")
                .child(
                    Switch::new("sw-high-freq")
                        .checked(high_freq)
                        .small()
                        .on_click(cx.listener(|this, checked: &bool, _win, cx| {
                            this.prefs_store.update(|p| p.high_frequency_sampling = *checked);
                            cx.notify();
                        })),
                ),
        )
}