Bindings

React uses controlled inputs: you set value={state} and update it yourself in onChange. This is deliberate — one-way data flow keeps state changes explicit. Svelte offers bind:value for two-way binding, which wires the input and the variable together automatically. There is no direct React equivalent — it is a genuine Svelte superpower.

Text input: controlled vs `bind:value`

function NameForm() {
  const [name, setName] = React.useState('');
  return (
    <>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Your name"
      />
      <p>Hello, {name || 'stranger'}!</p>
    </>
  );
}

<script>
  let name = $state('');
</script>

<input bind:value={name} placeholder="Your name" />
<p>Hello, {name || 'stranger'}!</p>

bind:value replaces both value={name} and onChange={e => setName(e.target.value)} in a single directive.

Checkbox: `bind:checked`

function Opt() {
  const [agreed, setAgreed] = React.useState(false);
  return (
    <label>
      <input
        type="checkbox"
        checked={agreed}
        onChange={e => setAgreed(e.target.checked)}
      />
      I agree
    </label>
  );
}

<script>
  let agreed = $state(false);
</script>

<label>
  <input type="checkbox" bind:checked={agreed} />
  I agree
</label>
<p>Agreed: {agreed}</p>

function Picker() {
  const [color, setColor] = React.useState('red');
  return (
    <select value={color} onChange={e => setColor(e.target.value)}>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  );
}

<script>
  let color = $state('red');
</script>

<select bind:value={color}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<p>Chosen: {color}</p>

Try it: a mini form

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let name = $state('');
  let email = $state('');
  let subscribed = $state(false);
  let plan = $state('free');

  let summary = $derived(
    name
      ? name + ' (' + email + ') — ' + plan + (subscribed ? ' + newsletter' : '')
      : 'Fill out the form above'
  );
</script>

<form onsubmit={e => e.preventDefault()}>
  <label>
    Name
    <input bind:value={name} placeholder="Your name" />
  </label>
  <label>
    Email
    <input type="email" bind:value={email} placeholder="you@example.com" />
  </label>
  <label>
    Plan
    <select bind:value={plan}>
      <option value="free">Free</option>
      <option value="pro">Pro</option>
      <option value="enterprise">Enterprise</option>
    </select>
  </label>
  <label class="check">
    <input type="checkbox" bind:checked={subscribed} />
    Subscribe to newsletter
  </label>
</form>

<p class="summary">{summary}</p>

<style>
  form { display: flex; flex-direction: column; gap: 0.6rem; }
  label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
  label.check { flex-direction: row; align-items: center; gap: 0.5rem; }
  input, select { padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
  .summary { margin-top: 0.75rem; font-style: italic; color: #FF3E00; }
</style>

Bindings

Text input: controlled vs bind:value

Checkbox: bind:checked

Select / dropdown

Try it: a mini form

Text input: controlled vs `bind:value`

Checkbox: `bind:checked`