# svelte/no-bind-value-on-checkable-inputs

disallow useless bind:value on <input type="checkbox"> and <input type="radio">

  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

# 📖 Rule Details

This rule reports bind:value on <input type="checkbox"> and <input type="radio"> elements. For most <input> types, bind:value is used to bind the user-editable state. Checkboxes and radios are an exception, as their state is represented by the checked property instead. As a result, using bind:value instead of bind:checked on a checkbox or radio is a common mistake.

<script>
  /* eslint svelte/no-bind-value-on-checkable-inputs: "error" */
</script>

<!-- ✓ GOOD -->
<input type="checkbox" bind:checked=
Parsing error: Unexpected token https://svelte.dev/e/js_parse_error
{
...}>
<input type="checkbox" bind:group={...}> <!-- ✗ BAD --> <input type="checkbox" bind:value={...}>
<script>
  /* eslint svelte/no-bind-value-on-checkable-inputs: "error" */
</script>

<!-- ✓ GOOD -->
<input type="radio" bind:group=
Parsing error: Unexpected token https://svelte.dev/e/js_parse_error
{
...}>
<!-- ✗ BAD --> <input type="radio" bind:value={...}>

# 🔧 Options

Nothing.

# 🔇 When Not To Use It

You may need to set the value attribute of an <input type="checkbox"> or <input type="radio"> element dynamically. However, bind:value should never be necessary, because the value does not change through user interaction.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.21.0

# 🔍 Implementation