$props

Declare component props in Svelte with the $props rune

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:

<!--- file: App.svelte --->
<script>
	import MyComponent from './MyComponent.svelte';
</script>

<MyComponent adjective="cool" />

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

<!--- file: MyComponent.svelte --->
<script>
	let props = $props();
</script>

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

Signature

function $props(): any;

Destructuring props

More commonly, you’ll destructure your props:

<!--- file: MyComponent.svelte --->
<script>
	let { adjective } = $props();
</script>

<p>this component is {adjective}</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 { adjective = 'happy' } = $props();

Fallback values are not turned into reactive state proxies.

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: trouper = 'lights are gonna find me' } = $props();

Rest props

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

let { a, b, c, ...others } = $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:

App.svelte

<script>
	import Child from './Child.svelte';

	let count = $state(0);
</script>

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

<Child {count} />

Child.svelte

<script>
	let { count } = $props();
</script>

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

But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state.

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

Type safety

You can add type safety to your components by annotating your props. In TypeScript:

<script lang="ts">
	let { adjective }: { adjective: string } = $props();
</script>

In JSDoc:

<script>
	/** @type {{ adjective: string }} */
	let { adjective } = $props();
</script>

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

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

	let { adjective }: Props = $props();
</script>

Interfaces for native DOM elements are provided in the svelte/elements module.

If your component exposes snippet props like children, these should be typed using the Snippet interface imported from 'svelte'.

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

$props.id()

function id(): string;

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>
	const uid = $props.id();
</script>

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

	<label for="{uid}-lastname">Last Name: </label>
	<input id="{uid}-lastname" type="text" />
</form>