表单与输入

把字段值放在信号里，并在回调中把已接受的更改写回去。

#文本输入

ui.Input 和 ui.TextArea 是原生文本编辑器。绑定 Value，并在 OnInput 中更新它。OnSubmit 处理单行输入中的 Return。

func InputExample() *ui.Element {
	value, setValue := ui.CreateSignal("")
	return ui.Input().
		Value(value()).
		Placeholder("Write here").
		OnInputEvent(func(event *native.Event) { setValue(event.Value) }).
		Width(320).Height(32)
}

#字段

Field 把标签、控件、说明和错误信息组合在一起。用你自己的状态驱动 Required、Invalid 和 ValidationMessage。

func FieldExample() *ui.Element {
	email, setEmail := ui.CreateSignal("")
	field := ui.NewField(ui.FieldRootProps{
		Required: true,
		Filled:   func() bool { return email() != "" },
	})
	return field.Root().FlexCol().Gap(6).Children(
		field.Label().Child("Email"),
		field.Control(ui.FieldControlProps{
			InputPartProps: ui.InputPartProps{
				Value:       email,
				Placeholder: "you@example.com",
				OnInput:     func(event *native.Event) { setEmail(event.Value) },
			},
		}),
		field.Description().Child("Used for receipts"),
		field.Error().Child("Enter a valid email address"),
	)
}

校验模式见 Field。

#选项

复选框接受 bool 或混合状态。单选组保存一个值；复选框组和开关组可以保存多个值。禁用与只读是分开的。

func CheckboxGroupExample() *ui.Element {
	values, setValues := ui.CreateSignal([]string{"email"})
	group := ui.NewCheckboxGroup(ui.CheckboxGroupProps{
		AllValues: []string{"email", "push"},
		Value:     values,
		OnValueChange: func(next []string, _ *native.Event) {
			setValues(next)
		},
	})
	email := ui.NewCheckbox(ui.CheckboxProps{Value: "email"})
	push := ui.NewCheckbox(ui.CheckboxProps{Value: "push"})
	return group.Root().FlexCol().Gap(8).Children(
		email.Root().Child("Email"),
		push.Root().Child("Push"),
	)
}

#选择器

Select 从列表中选择。Combobox 把输入和选择结合起来。Autocomplete 接受自由输入。多选使用 Values 和 OnValuesChange。

func SelectExample() *ui.Element {
	value, setValue := ui.CreateSignal[*string](nil)
	picker := ui.NewSelect(ui.SelectRootProps{
		PickerSourceProps: ui.PickerSourceProps{
			Items: func() []ui.OptionDeclaration {
				return []ui.OptionDeclaration{
					{Value: "go", Label: "Go"},
					{Value: "swift", Label: "Swift"},
				}
			},
		},
		Value: value,
		OnValueChange: func(next *string, _ *native.Event) {
			setValue(next)
		},
	})
	return picker.Root().Children(
		picker.Value(),
		picker.Icon().Child("▾"),
	)
}

#事件

按钮使用 OnClick(func() { ... })。需要 *native.Event 时改用 OnClickEvent。复合控件的回调包含类型化的值，并在相关时附带事件。界面更新必须在 UI 协程上进行；后台工作使用 ui.Async。