Skip to content

Commit a39707a

Browse files
Apply suggestions from code review
Co-authored-by: Rich Harris <[email protected]>
1 parent 618638f commit a39707a

File tree

3 files changed

+9
-6
lines changed

3 files changed

+9
-6
lines changed

documentation/docs/03-template-syntax/11-bind.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,22 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
5353

5454
If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
5555

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`.
5757

5858
```svelte
5959
<script>
6060
let value = $state('');
6161
</script>
6262
6363
<form>
64-
<input bind:value defaultValue="x">
64+
<input bind:value defaultValue="not the empty string">
6565
<input type="reset" value="Reset">
6666
</form>
6767
```
6868

69+
> [!NOTE]
70+
> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.
71+
6972
## `<input bind:checked>`
7073

7174
Checkbox and radio inputs can be bound with `bind:checked`:
@@ -77,7 +80,7 @@ Checkbox and radio inputs can be bound with `bind:checked`:
7780
</label>
7881
```
7982

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`.
8184

8285
```svelte
8386
<script>
@@ -172,7 +175,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
172175
</select>
173176
```
174177

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`.
176179

177180
```svelte
178181
<select bind:value={selected}>

packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @import { AST } from '#compiler' */
22
/** @import { Context } from '../types' */
3-
import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
3+
import { is_mathml, is_svg, is_void } from '../../../../utils.js';
44
import {
55
is_tag_valid_with_ancestor,
66
is_tag_valid_with_parent

packages/svelte/src/internal/client/dom/elements/bindings/input.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function bind_value(input, get, set = get) {
3636

3737
if (
3838
// If we are hydrating and the value has since changed,
39-
// then use the update value from the input instead.
39+
// then use the updated value from the input instead.
4040
(hydrating && input.defaultValue !== input.value) ||
4141
// If defaultValue is set, then value == defaultValue
4242
// TODO Svelte 6: remove input.value check and set to empty string?

0 commit comments

Comments
 (0)