Form Input Bindings

Vue

<script lang="ts" setup>
import { ref } from 'vue';

const text = ref('');
</script>

<template>
  <input v-model="text" />
  <div>{{ text }}</div>
</template>

Svelte

<script lang="ts">
  let text = '';
</script>

<input bind:value={text}>
<div>{text}</div>

React

import { useSignal } from '@preact/signals';

export function App() {
  const text = useSignal('');

  const onInput = (event: Event) => {
    text.value = (event.target as HTMLInputElement).value;
  };

  return (
    <>
      <input value={text} onInput={onInput} />
      <div>{text}</div>
    </>
  );
}