sveltejs/svelte · error · Error

bind_invalid_checkbox_value

bind_invalid_checkbox_value

Error message

bind_invalid_checkbox_value
Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
https://svelte.dev/e/bind_invalid_checkbox_value

What it means

Runtime error `bind_invalid_checkbox_value`: using `bind:value` on an `<input type="checkbox">` is disallowed. Checkboxes expose their state via the `checked` property, not `value`, so binding `value` would never reflect the toggled state. The fix is mechanical: switch to `bind:checked`. Production builds throw only the error URL.

Source

Thrown at packages/svelte/src/internal/client/errors.js:33

		error.name = 'Svelte error';

		throw error;
	} else {
		throw new Error(`https://svelte.dev/e/async_derived_orphan`);
	}
}

/**
 * Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
 * @returns {never}
 */
export function bind_invalid_checkbox_value() {
	if (DEV) {
		const error = new Error(`bind_invalid_checkbox_value\nUsing \`bind:value\` together with a checkbox input is not allowed. Use \`bind:checked\` instead\nhttps://svelte.dev/e/bind_invalid_checkbox_value`);

		error.name = 'Svelte error';

		throw error;
	} else {
		throw new Error(`https://svelte.dev/e/bind_invalid_checkbox_value`);
	}
}

/**
 * Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
 * @param {string} component
 * @param {string} key
 * @param {string} name
 * @returns {never}
 */
export function bind_invalid_export(component, key, name) {
	if (DEV) {
		const error = new Error(`bind_invalid_export\nComponent ${component} has an export named \`${key}\` that a consumer component is trying to access using \`bind:${key}\`, which is disallowed. Instead, use \`bind:this\` (e.g. \`<${name} bind:this={component} />\`) and then access the property on the bound component instance (e.g. \`component.${key}\`)\nhttps://svelte.dev/e/bind_invalid_export`);

		error.name = 'Svelte error';

View on GitHub (pinned to 20b341f100)

Solutions

1. Change `bind:value` to `bind:checked` on the checkbox: `<input type="checkbox" bind:checked={flag}>`.
2. If the field is part of a polymorphic input component, branch the binding directive on the input type.
3. For checkbox groups bound to an array, use `bind:group` instead.

Example fix

// before
<input type="checkbox" bind:value={agree} />

// after
<input type="checkbox" bind:checked={agree} />

// Scan templates for checkbox inputs with bind:value.
function checkboxValueBind(source) {
  return /<input\b[^>]*\btype=["']checkbox["'][^>]*\bbind:value=/.test(source)
      || /<input\b[^>]*\bbind:value=[^>]*\btype=["']checkbox["']/.test(source);
}

When it happens

Trigger: At runtime (DEV) when a checkbox input is bound with `bind:value`, e.g. `<input type="checkbox" bind:value={flag}>`. Svelte detects the input type and throws on bind setup.

Common situations: Generically generated forms, design-system components that render the same `bind:value` for all input types, or copy-pasted form code where the input type was changed to checkbox without updating the binding.

Related errors

• bind_invalid_export
• bind_not_bindable
• async_derived_orphan
• component_api_changed
• component_api_invalid_new

AI-assisted analysis of sveltejs/svelte@20b341f100 (2026-08-12). Data as JSON: /api/errors/2bbcdd9ac0e32ca2. Report an issue: GitHub.