feat(v4): new implementation for the InputOTP component#1505
Merged
sadeghbarati merged 8 commits intounovue:v4-docsfrom Nov 2, 2025
Merged
feat(v4): new implementation for the InputOTP component#1505sadeghbarati merged 8 commits intounovue:v4-docsfrom
InputOTP component#1505sadeghbarati merged 8 commits intounovue:v4-docsfrom
Conversation
componentField contains v-model binding
| data-slot="input-otp" | ||
| class="disabled:cursor-not-allowed" | ||
| > | ||
| {{ updateContext(slotProps) }} |
Collaborator
There was a problem hiding this comment.
Hi there! 👋
I believe it’s better to provide context from vue-input-otp instead of from within the <template>.
For now, let's use slotProps. 🙏
I will try to update the upstream repository and submit a pull request, but it may take some time that is why we need to stick with slotProps for now.
Contributor
Author
There was a problem hiding this comment.
Yes, exactly what I thought as well. Having this provided from the package would be a lot cleaner🙏🏻
Collaborator
|
No need to revert back to slotProps Managed to work on it Will update this PR afterwards Thanks for your contribution 🫡❤️ |
Contributor
Author
|
What a mighty PR you made there! 😄 Hope this will get merged soon, it'll bring this project a little closer to v4 being ready :) You're welcome ofc, thx for your awesome work! ❤️ |
2 tasks
zernonia
added a commit
that referenced
this pull request
Nov 15, 2025
* feat: new docs structure * feat: more doc stuff * fix: rendering issue * chore: wip * chore: wip * feat: first poc of chart component * feat: area chart * feat: charts * refactor: blocks * refactor: blocks * chore: demo component, docs * chore: add dashboard-01 * chore: rename, and fix styling * chore: more demo * chore: wip * chore: form * chore: sidebar * chore: improve sidebar * chore: fix lockfile * docs: chart * chore: fix lockfile * chore: fix lockfile * chore: remove extra blank lines (#1419) * chore: remove extra blank lines * chore: bump eslint * chore: lint --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> * chore: add workspace shadcn-vue package to use schema from it * chore: remove unused schema definitions from registry * refactor: use shadcn-vue schema update registry files * feat(input): remove flex class from shadcn * feat(button): remove shadow from buttons except outline from shadcn * feat(registry): refactor registry structure and add new registry files * fix: typecheck in www and v4 * feat: add v4 static registry structure and build scripts * chore: update static registry-ui file * chore: update v4 dependencies * fix: add client suffix to CodeTabs component to prevent hydration errors * docs: update nuxt installation and add ssr-width infos * docs: remove unnecessary double dash in vite project creation * docs: shadcn -> shadcn-vue * feat(tooltip): update colors from shadcn * chore: add persian calendar example * chore: update root and v4 deps add better-sqlite3 requirement for nuxt content * chore: fix lockfile * chore: add button-group, kbd, spinner * chore: update tailwind css file and remove accordion keyframes in favor of tw-animate-css support for reka-ui * chore: fix bad merge for charts and remove old chart files * chore: remove unused patch * docs(v4): add `Empty` component docs, update `Spinner` examples, fix v4 `Empty` component fix: v4 EmptyHeader and EmptyTitle components docs(v4): add `Empty` component with demos docs(v4): add demos to `Spinner` docs fix: correct ProseTable component docs(v4): add API reference sections to empty and spinner docs * docs: add vite-tsconfig-paths docs to vite installation * docs(v4): add `Item` to docs, cleanup (#1455) * feat: new `Item` component (#1448) * feat: add item components * docs(wip): item component docs + first examples * docs: more item component examples, add API reference section * chore: register new item component in docs sidebar * fix: correct registry references * chore: add ItemDemo to v4 playground * chore: formatting * chore: build registry * chore: build registry v4 * fix: import with @/registry so build registry could detect the component dependecies * chore: remove backtick from classes might fix the tw prefix partially applied * fix: remove backtick * fix: keep style of v3 registry for input-group components min-w-0 fix from shadcn * chore: remove unsed patch file * chore: build registry * chore: build registry v4 * chore: build registry LF Unix, OS X style * chore: build registry v4 LF Unix, OS X style --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> * docs: add item component with examples to v4 docs * fix(docs): correct empty component installation command * chore: remove unused demo components previously used in v4 playground * chore: update ItemAvatarDemo example to use original tw v4 syntax from shadcn/ui --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> * refactor: update registry * docs: support new meta * feat(v4): implement docs CommandMenu (#1466) * feat(v4): add CommandMenu component to v4 docs website chore: extend navigation data structure with type * chore: update * chore: update * chore: update nuxt.md shadcn-nuxt installation * fix: make CommandItem re-render whenever filter state changes * chore: format * chore: remove custom `useMutationObserver` cause this composable already exists in vueuse --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> * chore: update * feat(enhancement/v4): proper 404 handling, custom error page on docs (#1469) * chore: create proper 404 error when docs page entry is not found * feat(enhancement): add custom error page chore: adjust component structure * docs: update navgiations * chore: update vite instructions and set style.css as default stylesheet for vue templates * chore: update nuxt manual module tab to use `addComponentExports` utility from `nuxt/kit` * docs: update `vite` instructions and set style.css as default stylesheet for vue templates (#1471) * docs: update vite instructions and set style.css as default stylesheet for vue templates add vite-tsconfig-path guide * docs: update nuxt manual way to use `addComponentExports` utility from `nuxt/kit` * fix(Checkbox): checkbox alignment with grid (#1472) * fix(Checkbox): checkbox alignment with grid from shadcn * chore: build registry v3 * chore: build registry v4 * chore(v4): update themes and main css to match upstream (#1474) * docs(v4): add more `ToggleGroup` demos, update docs (#1477) * docs(v4): add more `ToggleGroup` demos, update docs * chore: revert size-* classes to h-* w-* * chore: fix aria-label semantics * docs(v4): add more `Toggle` demos, update docs (#1478) * fix(Sonner): support border radius from theme from shadcn * feat(Sonner): changed sonner defaults to use lucide icons feat(components): changed sonner defaults to use lucide icons from shadcn add cn to sonner * docs(v4): add missing `Breadcrumb` demos, update docs (#1479) * chore: update * chore: fix lockfile * chore: update * docs: add mcp temporary, hydration issue * fix(docs): correct sidebar styles (#1495) * fix(docs): pass missing parameters to `handleNavigate` in MobileNav (#1496) * fix: fix theme code mismatch from shadcn * fix: theme-customizer * feat(Badge): make rounded-full from shadcn * docs: checkpoint for veevalidate form * feat: add native select from shadcn * chore: bump deps bump tailwind to 4.1.15 to resolve the wrong class compilation * docs: complete veevalidate form demo and docs * docs: complete tanstack demo and docs * feat: fallthrough slot props for popover for closing popover with calendar date selection * feat: add slot to calendar to manage the month and year selectors * chore: prepare cf deploy * docs: examples route * docs: homepage components * docs: populate all examples * fix(v4): fix pin input paste and backspace behavior (#1503) * fix: remove default modelValue that interferes with paste and backspace functionality chore: set default otp autocomplete to true * chore: revert PinInput rename * chore: revert PinInput component demos * docs: remove InputOTP docs, deprecate PinInput component * chore: remove current InputOTP component implementation * fix: correct import prefixes * docs: simplify changelog * docs: copy page component * docs: updated component preview * docs: add carbons ads * feat(toggle-group): add spacing props from shadcn * docs: update * docs: update button docs and demos * docs: update carousel docs and demos * chore: remove shiki transformers cause its only affect on nuxt-shiki component.ts file * docs: fix blocks preview * docs: simple cleanup * docs: announcement and changelog * docs: update className reference to class, cleanup * feat(v4): new implementation for the `InputOTP` component (#1505) * feat: reimplement `InputOTP` component using vue-input-otp * docs: update `InputOTP` component documentation, add examples * fix(docs): correct manual installation step for input otp * feat: wrap InputOTPSeparator icon with slot so the user could change the icon easily * chore: update demos and use componentField instead of field slotProps componentField contains v-model binding * feat: update tp vue-input-otp 0.3.0 --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> * feat(v4): implement missing raw markdown route (#1512) chore: update DocsCopyPage * docs: copy data table related content * fix: command menu item padding * docs: fix navigation menu demo alignment * feat: add fallthrough slotProps * feat: add layouts to calendar "month-and-year" | "month-only" | "year-only" | undefined update calendar examples add chrono-node * docs: fix InputOTPForm validate on modelValue updates * fix: update vue-input-otp dependency to 0.3.1 (#1517) closes #1516 * docs: update calendar and calendar system guide * docs: update * chore: update pnpm and deps * docs: update empty description, typo * docs: add stepper to v4 * chore: build registry v4 * chore: deprecate www * chore: fix www build registry * chore: update * chore: update * chore: cleanup * refactor: build script to crawl latest content * chore: build registry again * docs(v4): update styles (#1521) * docs: update DocsSidebar style * docs: apply overscroll-none to html * docs: clarify the placeholder usage in calendar * docs: fix warning * docs: og image, and favicon * docs: update manual installation with link to github code * chore: bump v4 deps * feat: add hsl and color indicators to theme chanage app/globals.css to app/assets/css/tailwind.css * fix: restore two-finger navigation on macOS by adjusting overscroll behavior from shadcn * fix: slider thumb color (#1529) * chore: update * fix(v4): correct multiple syntax typos in block components (#1530) * fix: correct multiple syntax typos in block components * chore: typos with crate-ci/typos --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> * refactor: `FieldError` no duplicate errors * chore: add calendar systems demo * chore: update vue run nolyfill * chore: build registry * docs(v4): new blocks, update existing blocks (#1532) * feat: add signup blocks chore: update registry categories * feat: add otp blocks * fix: correct attribute names * chore: update login examples to use the Field component * chore: formatting * chore: rebuild registry * fix: correct html-for to for attributes (#1534) fix: correct className usages to class style: replace ' with ' * docs: add dialog examples * chore: update tailwind-merge * chore: bump to Nuxt 4 * chore: fix type issue, default bullet color * docs: add nuxt image to render local assets * docs: add legacy link, lllms.txt --------- Co-authored-by: zernonia <zernonia@gmail.com> Co-authored-by: Hooray Hu <304327508@qq.com> Co-authored-by: Julian Schramm <hi@julian.center>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
-
❓ Type of change
📚 Description
This PR adds the new
InputOTPcomponent using wobsoriano/vue-input-otp that behaves as closely as possible to the one in the current version of shadcn/ui as we discussed in #1503 😄Steps taken
InputOTPcomponent on the v4 registryOTPInputto accept all kinds of characters (.*) instead having the default invue-input-otponly accept digits and letters. I did this to match the behaviour of the original guilhermerodz/input-otp react library and therefore shadcn/ui. We could discuss here whether we should make a PR in wobsoriano/vue-input-otp to possibly change this default, or just to have this override in our component.React.contextusage in shadcn/ui throughotp-input. This behaviour is not provided fromvue-input-otp, as it only gives us slot props to use.Known issue
There is a minor bug when typing characters into an otp input where the
patterndoes not allow the typed characters.Example:
:pattern="REGEXP_ONLY_DIGITS_AND_CHARS"and typing "#$%" moves the focused slot forward (but also inconsistently), which is not the case in shadcn/ui. As this is controlled viavue-input-otp, I likely suspect the issue to be in there instead of on our side.Here's a video of me repeatedly typing
#into the pattern example on the docs page:Screen.Recording.2025-10-26.at.15.51.15.mov
As you see, the characters correctly don't show up in the input, but the focussed input segment moves forward, and sometimes also backwards.
📸 Screenshots (if appropriate)
📝 Checklist