svelte/documentation/tutorial/06-bindings/13-component-bindings/text.md

---
title: Component bindings
---

Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:

```svelte
<Keypad bind:value={pin} on:submit={handleSubmit} />
```

Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.

> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
Add a tutorial (#2132) 6 years ago			`---`
			`title: Component bindings`
			`---`

			Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:

feat(site-2): Update links, move blog out of SK folder to content (#8289) * Update links * Move blog to site/content * Update site/content/docs/02-component-format.md * Fix docs links * Add global prettierrc * Auto format * Fix git merge artifact * Fix errors * Update html to svelte(remaining ones) * Add 2 blog posts * Modify prettierrc * Minor design fix * Switch package lock to spaces, prettier ignore * Regenerate package lock * prettier format * Update deps * Hack the build into working * add missing blog post --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Rich Harris <git@rich-harris.dev> 2 years ago			```svelte
			`<Keypad bind:value={pin} on:submit={handleSubmit} />`
Add a tutorial (#2132) 6 years ago			```

			Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.

feat(site-2): Update links, move blog out of SK folder to content (#8289) * Update links * Move blog to site/content * Update site/content/docs/02-component-format.md * Fix docs links * Add global prettierrc * Auto format * Fix git merge artifact * Fix errors * Update html to svelte(remaining ones) * Add 2 blog posts * Modify prettierrc * Minor design fix * Switch package lock to spaces, prettier ignore * Regenerate package lock * prettier format * Update deps * Hack the build into working * add missing blog post --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Rich Harris <git@rich-harris.dev> 2 years ago			`> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.`