Components and props with $props

Component inputs are props, passed like element attributes — <MyComponent adjective="cool" /> — and received with the $props rune, commonly destructured as let { adjective } = $props(). Destructuring supports fallback values (used when the parent omits the prop or passes undefined), renaming for invalid identifiers or keywords like super, and rest properties for the remaining props; fallback values are not turned into reactive state proxies, so mutating a fallback object causes no updates. Prop references update when the parent's value updates, and a child may temporarily reassign a prop for unsaved ephemeral state — but do not mutate props: mutating a regular object prop has no effect, and mutating a reactive state proxy raises an ownership_invalid_mutation warning because the component is mutating state it does not own. Use callback props to communicate changes, or the $bindable rune when parent and child should share the same object. Annotating props with TypeScript or JSDoc is recommended so consumers can discover what to pass; $props.id() (Svelte 5.20.0+) generates an instance-unique ID consistent across hydration for linking elements with for and aria-labelledby. Scope: Svelte 5. Reviewed October 4, 2026.