You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/03-template-syntax/11-bind.md
+7-4Lines changed: 7 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,19 +53,22 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
53
53
54
54
If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
55
55
56
-
You can give the input a default value by setting the `defaultValue`property. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string. Note that for the initial render the value of the binding takes precedence if it's not`null` or `undefined`.
56
+
If an `<input>` has a `defaultValue`and is part of a form, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is`null` or `undefined`.
57
57
58
58
```svelte
59
59
<script>
60
60
let value = $state('');
61
61
</script>
62
62
63
63
<form>
64
-
<input bind:value defaultValue="x">
64
+
<input bind:value defaultValue="not the empty string">
65
65
<input type="reset" value="Reset">
66
66
</form>
67
67
```
68
68
69
+
> [!NOTE]
70
+
> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.
71
+
69
72
## `<input bind:checked>`
70
73
71
74
Checkbox and radio inputs can be bound with `bind:checked`:
@@ -77,7 +80,7 @@ Checkbox and radio inputs can be bound with `bind:checked`:
77
80
</label>
78
81
```
79
82
80
-
You can give the input a default value by setting the `defaultChecked`property. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of `false`. Note that for the initial render the value of the binding takes precedence if it's not`null` or `undefined`.
83
+
If an `<input>` has a `defaultChecked`attribute and is part of a form, it will revert to that value instead of `false` when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is`null` or `undefined`.
81
84
82
85
```svelte
83
86
<script>
@@ -172,7 +175,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
172
175
</select>
173
176
```
174
177
175
-
You can give the select a default value by setting the`selected`property on the elements that should be selected initially. This way, when the select is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for single-value selects) or the empty array (for multi-value selects). Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
178
+
You can give the `<select>` a default value by adding a`selected`attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
0 commit comments