表单与输入

把字段值放在信号里，并在事件处理函数中把已接受的更改写回去。

#文本输入

const [value, setValue] = createSignal("");
const [notes, setNotes] = createSignal("");

<Input value={value()} onInput={event => setValue(event.value ?? "")} placeholder="Name" />
<TextArea value={notes()} onInput={event => setNotes(event.value ?? "")} />

onSubmit 处理单行输入中的 Return。

#字段

Field 把标签、控件、说明和错误信息连接在一起。

<Field.Root required invalid={name().length === 0} validationMessage="Enter a name">
  <Field.Label><Text>Name</Text></Field.Label>
  <Field.Control value={name()} onInput={event => setName(event.value ?? "")} />
  <Field.Description><Text>Shown on your profile.</Text></Field.Description>
  <Field.Error><Text>Enter a name.</Text></Field.Error>
</Field.Root>

#选项

用指示器和标签组合 Checkbox、CheckboxGroup、RadioGroup、Radio 和 Switch。从每个根的变更回调中更新状态。

<Checkbox.Root checked={checked()} onCheckedChange={setChecked}>
  <Checkbox.Indicator><Text>✓</Text></Checkbox.Indicator>
  <Text>Remember this device</Text>
</Checkbox.Root>

#选择器

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

<Select.Root
  ariaLabel="Theme"
  items={[
    { value: "system", label: "System" },
    { value: "light", label: "Light" },
    { value: "dark", label: "Dark" },
  ]}
  value={theme()}
  onValueChange={setTheme}
/>

#事件

文本事件把字符串放在 event.value 中。按钮使用 onClick。把界面更新放在这些处理函数中；把慢的工作放到别处，完成后再写入信号。