svelte/documentation/docs/02-runes/05-$props.md

title
$props

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>
	import MyComponent from './MyComponent.svelte';
</script>

/// file: App.svelte
<MyComponent adjective="cool" />

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

<script>
	let props = $props();
</script>

/// file: MyComponent.svelte
<p>this component is {props.adjective}</p>

...though more commonly, you'll destructure your props:

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

<p>this component is {+++adjective+++}</p>

Default values

Destructuring allows us to declare default values, which are used if the parent component does not set a given prop:

/// file: MyComponent.svelte
let { adjective = 'happy' } = $props();

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();

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 { adjective }: { adjective: string } = $props();
</script>

...while in JSDoc you can do this:

<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>

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