-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Describe the bug
When using the function-accessor syntax for bind:checked, the setter function is ignored for checkboxes, making it impossible to create a truly controlled checkbox. The checkbox updates its visual state regardless of what the setter does.
Expected behavior
The text input () is not editable, which is correct, because the setter is a no-op.
The checkbox should also not update its checked state when clicked, since the setter does nothing. In other words, its visual state should be controlled entirely by the value returned from the getter.
Actual behavior
The text input is not editable (correct).
The checkbox updates visually when clicked (incorrect), even though the setter is a no-op and state does not actually change. This breaks the controlled component pattern.
Why this matters
It should be possible to create fully controlled form elements, especially for validation scenarios or when changes must be accepted/rejected based on additional logic. The current behavior makes it impossible to prevent the checkbox from toggling unless you use deprecated APIs.
Workaround
The only current workaround is to manually prevent the checkbox from updating using an event handler:
<input
type="checkbox"
bind:checked={() => bool, () => {}}
onclick={e => e.preventDefault()}
/>
This way, the checkbox never updates its checked state due to user interaction and only reflects the value returned from the getter.
Reproduction
https://svelte.dev/playground/d1b3e3840fa741a8af55fdf9379bcf0e?version=5.38.0
System Info
Svelte 5.38.0
Severity
annoyance