noSvelteBindValueOnCheckableInputs (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noSvelteBindValueOnCheckableInputs
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/no-bind-value-on-checkable-inputs

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noSvelteBindValueOnCheckableInputs": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow bind:value on checkbox and radio inputs.

bind:value keeps a variable in sync with the value of an input. For most <input> types, value is what the user types or picks. Checkboxes and radio buttons are different: the user changes whether they are checked, and their value only describes what a checked input stands for. So bind:value on these inputs does not track the user’s choice. On a checkbox, Svelte also throws an error during development.

Use bind:checked to track whether a single checkbox is checked. Use bind:group to track which checkboxes or radio buttons in a group are selected.

Examples

Invalid

1
<input type="checkbox" bind:value={accepted} />

code-block.svelte:1:24 lint/nursery/noSvelteBindValueOnCheckableInputs  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  ✖ bind:value does not track whether this checkbox is checked.
  
  > 1 │ <input type="checkbox" bind:value={accepted} />
      │                        ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Users change whether a checkbox is checked, not its value.
  
  ℹ Use bind:checked to track whether this checkbox is checked, or bind:group to track the values of all checked checkboxes in a group.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use bind:checked instead.
  
    1   │ - <input·type="checkbox"·bind:value={accepted}·/>
      1 │ + <input·type="checkbox"·bind:checked={accepted}·/>
    2 2 │

1
<input type="radio" bind:value={size} />

code-block.svelte:1:21 lint/nursery/noSvelteBindValueOnCheckableInputs  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  ✖ bind:value does not track whether this radio button is checked.
  
  > 1 │ <input type="radio" bind:value={size} />
      │                     ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Users change whether a radio button is checked, not its value.
  
  ℹ Use bind:group to track the value of the selected radio button in a group.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use bind:group instead.
  
    1   │ - <input·type="radio"·bind:value={size}·/>
      1 │ + <input·type="radio"·bind:group={size}·/>
    2 2 │

Valid

1
<input type="checkbox" bind:checked={accepted} />
2
<input type="checkbox" value="cheese" bind:group={toppings} />
3
<input type="radio" value="small" bind:group={size} />
4
<input type="text" bind:value={name} />