Svelte Svelte
search ⌘K

Svelte • Runes

$props

On this page

The inputs to a component are referred to as props, which is short for properties. You pass props to components just like you pass attributes to elements:

<script lang="ts">
	import 
type MyComponent = SvelteComponent<Record<string, any>, any, any>
const MyComponent: LegacyComponentType
MyComponent from './MyComponent.svelte';
</script>

<const MyComponent: LegacyComponentTypeMyComponent adjective="cool" />
<script>
	import 
type MyComponent = SvelteComponent<Record<string, any>, any, any>
const MyComponent: LegacyComponentType
MyComponent from './MyComponent.svelte';
</script>

<const MyComponent: LegacyComponentTypeMyComponent adjective="cool" />

On the other side, inside MyComponent.svelte, we can receive props with the $props rune…

<script lang="ts">
	let let props: anyprops = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<p>this component is {let props: anyprops.adjective}</p>
<script>
	let let props: anyprops = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<p>this component is {let props: anyprops.adjective}</p>

…though more commonly, you’ll destructure your props:

<script lang="ts">
	let { let adjective: anyadjective } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<p>this component is {let adjective: anyadjective}</p>
<script>
	let { let adjective: anyadjective } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<p>this component is {let adjective: anyadjective}</p>

Fallback values

Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is undefined):

let { let adjective: anylet adjective: anyadjective = 'happy' } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$props();

Fallback values are not turned into reactive state proxies (see Updating props for more info)

Renaming props

We can also use the destructuring assignment to rename props, which is necessary if they’re invalid identifiers, or a JavaScript keyword like super:

let { super: let trouper: anylet trouper: anytrouper = 'lights are gonna find me' } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$props();

Rest props

Finally, we can use a rest property to get, well, the rest of the props:

let { let a: anylet a: anya, let b: anylet b: anyb, let c: anylet c: anyc, ...let others: anylet others: anyothers } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$props();

Updating props

References to a prop inside a component update when the prop itself updates — when count changes in App.svelte, it will also change inside Child.svelte. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state:

<script lang="ts">
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';

	let let count: numbercount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(0);
</script>

<button onclick={() => (let count: numbercount += 1)}>
	clicks (parent): {let count: numbercount}
</button>

<const Child: LegacyComponentTypeChild {count: numbercount} />
<script>
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';

	let let count: numbercount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(0);
</script>

<button onclick={() => (let count: numbercount += 1)}>
	clicks (parent): {let count: numbercount}
</button>

<const Child: LegacyComponentTypeChild {count: numbercount} />
<script lang="ts">
	let { let count: anycount } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => (let count: anycount += 1)}>
	clicks (child): {let count: anycount}
</button>
<script>
	let { let count: anycount } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => (let count: anycount += 1)}>
	clicks (child): {let count: anycount}
</button>

While you can temporarily reassign props, you should not mutate props unless they are bindable.

If the prop is a regular object, the mutation will have no effect:

<script lang="ts">
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';
</script>

<const Child: LegacyComponentTypeChild object={{ count: numbercount: 0 }} />
<script>
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';
</script>

<const Child: LegacyComponentTypeChild object={{ count: numbercount: 0 }} />
<script lang="ts">
	let { let object: anyobject } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => {
	// has no effect
	let object: anyobject.count += 1
}}>
	clicks: {let object: anyobject.count}
</button>
<script>
	let { let object: anyobject } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => {
	// has no effect
	let object: anyobject.count += 1
}}>
	clicks: {let object: anyobject.count}
</button>

If the prop is a reactive state proxy, however, then mutations will have an effect but you will see an ownership_invalid_mutation warning, because the component is mutating state that does not ‘belong’ to it:

<script lang="ts">
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';

	let 
let object: {
    count: number;
}
object = 
function $state<{
    count: number;
}>(initial: {
    count: number;
}): {
    count: number;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<{
    count: number;
}>(initial: {
    count: number;
}): {
    count: number;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state({count: numbercount: 0});
</script>

<const Child: LegacyComponentTypeChild {
object: {
    count: number;
}
object} />
<script>
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';

	let 
let object: {
    count: number;
}
object = 
function $state<{
    count: number;
}>(initial: {
    count: number;
}): {
    count: number;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<{
    count: number;
}>(initial: {
    count: number;
}): {
    count: number;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state({count: numbercount: 0});
</script>

<const Child: LegacyComponentTypeChild {
object: {
    count: number;
}
object} />
<script lang="ts">
	let { let object: anyobject } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => {
	// will cause the count below to update,
	// but with a warning. Don't mutate
	// objects you don't own!
	let object: anyobject.count += 1
}}>
	clicks: {let object: anyobject.count}
</button>
<script>
	let { let object: anyobject } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => {
	// will cause the count below to update,
	// but with a warning. Don't mutate
	// objects you don't own!
	let object: anyobject.count += 1
}}>
	clicks: {let object: anyobject.count}
</button>

The fallback value of a prop not declared with $bindable is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates:

<script lang="ts">
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';
</script>

<const Child: LegacyComponentTypeChild />
<script>
	import 
type Child = SvelteComponent<Record<string, any>, any, any>
const Child: LegacyComponentType
Child from './Child.svelte';
</script>

<const Child: LegacyComponentTypeChild />
<script lang="ts">
	let { let object: anyobject = { count: numbercount: 0 } } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => {
	// has no effect if the fallback value is used
	let object: anyobject.count += 1
}}>
	clicks: {let object: anyobject.count}
</button>
<script>
	let { let object: anyobject = { count: numbercount: 0 } } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<button onclick={() => {
	// has no effect if the fallback value is used
	let object: anyobject.count += 1
}}>
	clicks: {let object: anyobject.count}
</button>

In summary: don’t mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the $bindable rune.

Type safety

You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this…

<script lang="ts">
	let { let adjective: stringadjective }: { adjective: stringadjective: string } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

…while in JSDoc you can do this:

<script lang="ts">
	let { let adjective: stringadjective }: { adjective: stringadjective: string } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>
<script>
	/** @type {{ adjective: string }} */
	let { let adjective: anyadjective } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

You can, of course, separate the type declaration from the annotation:

<script lang="ts">
	interface Props {
		Props.adjective: stringadjective: string;
	}

	let { let adjective: stringadjective }: Props = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

Interfaces for native DOM elements are provided in the svelte/elements module (see Typing wrapper components)

If your component exposes snippet props like children, these should be typed using the Snippet interface imported from 'svelte' — see Typing snippets for examples.

Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.

$props.id()

This rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.

This is useful for linking elements via attributes like for and aria-labelledby.

<script lang="ts">
	const const uid: stringuid = 
namespace $props
function $props(): any
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
namespace $props
function $props(): any
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props.function $props.id(): string
Generates an ID that is unique to the current component instance. When hydrating a server-rendered component,
the value will be consistent between server and client.
This is useful for linking elements via attributes like for and aria-labelledby.
@since5.20.0
id();
</script>

<form>
	<label for="{const uid: stringuid}-firstname">First Name: </label>
	<input id="{const uid: stringuid}-firstname" type="text" />

	<label for="{const uid: stringuid}-lastname">Last Name: </label>
	<input id="{const uid: stringuid}-lastname" type="text" />
</form>
<script>
	const const uid: stringuid = 
namespace $props
function $props(): any
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
namespace $props
function $props(): any
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props.function $props.id(): string
Generates an ID that is unique to the current component instance. When hydrating a server-rendered component,
the value will be consistent between server and client.
This is useful for linking elements via attributes like for and aria-labelledby.
@since5.20.0
id();
</script>

<form>
	<label for="{const uid: stringuid}-firstname">First Name: </label>
	<input id="{const uid: stringuid}-firstname" type="text" />

	<label for="{const uid: stringuid}-lastname">Last Name: </label>
	<input id="{const uid: stringuid}-lastname" type="text" />
</form>
Edit this page on GitHub llms.txt