# Input OTP Accessible one-time password component with copy paste functionality. [Docs](https://bits-ui.com/docs/components/pin-input) [API Reference](https://bits-ui.com/docs/components/pin-input#api-reference) ```svelte {#snippet children({ cells })} {#each cells.slice(0, 3) as cell (cell)} {/each} {#each cells.slice(3, 6) as cell (cell)} {/each} {/snippet} ``` ## About Input OTP is built on top of Bits UI's [PinInput](https://bits-ui.com/docs/components/pin-input) which is inspired by [@guilherme\_rodz](https://twitter.com/guilherme_rodz)'s Input OTP component. ## Installation ```bash pnpm dlx shadcn-svelte@latest add input-otp ``` ```bash npx shadcn-svelte@latest add input-otp ``` ```bash bun x shadcn-svelte@latest add input-otp ``` ## Usage ```svelte {#snippet children({ cells })} {#each cells.slice(0, 3) as cell} {/each} {#each cells.slice(3, 6) as cell} {/each} {/snippet} ``` ## Examples ### Pattern Use the `pattern` prop to define a custom pattern for the OTP input. ```svelte {#snippet children({ cells })} {#each cells as cell (cell)} {/each} {/snippet} ``` ```svelte ``` ### Separator You can use the `InputOTP.Separator` component to add a separator between the groups of cells. ```svelte {#snippet children({ cells })} {#each cells.slice(0, 2) as cell (cell)} {/each} {#each cells.slice(2, 4) as cell (cell)} {/each} {#each cells.slice(4, 6) as cell (cell)} {/each} {/snippet} ``` ```svelte {#snippet children({ cells })} {#each cells.slice(0, 2) as cell} {/each} {#each cells.slice(2, 4) as cell} {/each} {/snippet} ``` ### Invalid ```svelte {#snippet children({ cells })} {#each cells.slice(0, 3) as cell (cell)} {/each} {#each cells.slice(3, 6) as cell (cell)} {/each} {/snippet} ``` ### Form ```svelte ```