> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# $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:

```svelte theme={null}
<!--- 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:

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

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

## Signature

```ts theme={null}
function $props(): any;
```

## Destructuring props

More commonly, you'll [*destructure*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:

```svelte theme={null}
<!--- 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`):

```js theme={null}
let { adjective = 'happy' } = $props();
```

<Note>
  Fallback values are not turned into reactive state proxies.
</Note>

## 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`:

```js theme={null}
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:

```js theme={null}
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`:

<Tabs>
  <Tab title="App.svelte">
    ```svelte theme={null}
    <script>
    	import Child from './Child.svelte';

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

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

    <Child {count} />
    ```
  </Tab>

  <Tab title="Child.svelte">
    ```svelte theme={null}
    <script>
    	let { count } = $props();
    </script>

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

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

<Warning>
  While you can temporarily *reassign* props, you should not *mutate* props unless they are [bindable](/runes/bindable).
</Warning>

## Type safety

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

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

In JSDoc:

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

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

```svelte theme={null}
<script lang="ts">
	interface Props {
		adjective: string;
	}

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

<Note>
  Interfaces for native DOM elements are provided in the `svelte/elements` module.
</Note>

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

```ts theme={null}
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`:

```svelte theme={null}
<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>
```