Skip to content

Cannot сreate сontrolled сheckbox with bind:checked using function accessors #16575

@dimensi

Description

@dimensi

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions