# Tab Select
> Animated tab selector using layoutId for a shared indicator that slides between tabs in Svelte Motion.
**Source:** [https://motion.svelte.page/examples/tab-select](https://motion.svelte.page/examples/tab-select)
**Markdown mirror:** [https://motion.svelte.page/examples/tab-select.md](https://motion.svelte.page/examples/tab-select.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: sliding indicator.
An accent indicator slides between tabs on every click. Only the active tab renders one; sharing a `layoutId` lets motion animate the indicator across tab boundaries instead of mount-unmount-flash.
**Metadata:** tag: `LAYOUTID` | pattern: `layoutId-indicator`
### Notes
- The indicator only renders inside the active tab's ` `. As `selectedTab` changes, the old indicator unmounts and the new one mounts — sharing `layoutId="selected-indicator"` tells motion to animate from the old position to the new one instead of fading out / in.
- ` ` wraps the conditional render so motion gets a chance to coordinate the handoff. Without it the indicator would still animate position, but the mount/unmount lifecycle wouldn't have a clean exit window.
- Each tab button stacks two gesture props — `whileTap` for press feedback and `whileFocus` for keyboard navigation. Plain object form on both; nothing fancier needed.
### Source
#### Default.svelte
Source file: [src/lib/examples/tab-select/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/tab-select/demos/Default.svelte)
```svelte