Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slow-nails-push.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: update `bind:checked` error message to clarify usage with radio inputs
4 changes: 3 additions & 1 deletion documentation/docs/03-template-syntax/12-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ Since 5.6.0, if an `<input>` has a `defaultValue` and is part of a form, it will

## `<input bind:checked>`

Checkbox and radio inputs can be bound with `bind:checked`:
Checkbox can be bound with `bind:checked`:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Checkbox can be bound with `bind:checked`:
Checkbox inputs can be bound with `bind:checked`:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modified.


```svelte
<label>
Expand All @@ -117,6 +117,8 @@ Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a f
</form>
```

> [!NOTE] Use `group:bind` for radio inputs instead of `bind:checked`.

## `<input bind:indeterminate>`

Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,11 @@ export function BindDirective(node, context) {
}
} else {
if (node.name === 'checked' && type?.value[0].data !== 'checkbox') {
e.bind_invalid_target(node, node.name, '<input type="checkbox">');
e.bind_invalid_target(
node,
node.name,
`<input type="checkbox"> - for <input type="radio">, use 'group' binding`
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please let me know if there are better message.

Copy link
Member

@PatrickG PatrickG Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In svelte 4 the last part was only in the error message if you tried to use it with type="radio".
Not sure if we want to keep it like that.

Suggested change
`<input type="checkbox"> - for <input type="radio">, use 'group' binding`
`<input type="checkbox">${type.value[0].data === 'radio' ? ` — for <input type="radio">, use 'group' binding` : ''}`

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modified.

I have a same experience of using bind:checked with radio input.
At that time, I went to the official doc and realized we should use group bind.

From that my experience, keeping extra message is friendly for developers but it is not necessary.

);
}

if (node.name === 'files' && type?.value[0].data !== 'file') {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[
{
"code": "bind_invalid_target",
"message": "`bind:checked` can only be used with <input type=\"checkbox\">",
"message": "`bind:checked` can only be used with <input type=\"checkbox\"> - for <input type=\"radio\">, use 'group' binding",
"start": {
"line": 5,
"column": 7
Expand Down