フォームと入力

フィールドの値はシグナルに置き、受け入れた変更はイベントハンドラから書き戻します。

#テキスト入力

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 は、1 行入力での 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

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 を使います。UI の更新はそれらのハンドラ内で行い、遅い処理は別の場所で実行し、終わったらシグナルに書き込みます。