Skip to content

Commit 0a7608e

Browse files
committed
docs
1 parent ed82781 commit 0a7608e

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,34 @@ The general syntax is `bind:property={expression}`, where `expression` is an _lv
1212
<input bind:value />
1313
```
1414

15+
1516
Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.
1617

1718
Most bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.
1819

20+
## Function bindings
21+
22+
You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:
23+
24+
```svelte
25+
<input bind:value={
26+
() => value,
27+
(v) => value = v.toLowerCase()}
28+
/>
29+
```
30+
31+
In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:
32+
33+
```svelte
34+
<div
35+
bind:clientWidth={null, redraw}
36+
bind:clientHeight={null, redraw}
37+
>...</div>
38+
```
39+
40+
> [!NOTE]
41+
> Function bindings are available in Svelte 5.9.0 and newer.
42+
1943
## `<input bind:value>`
2044

2145
A `bind:value` directive on an `<input>` element binds the input's `value` property:

0 commit comments

Comments
 (0)