Skip to content

add otp field to reflex components internal#6467

Merged
amsraman merged 2 commits intomainfrom
carlos/otp-field
May 7, 2026
Merged

add otp field to reflex components internal#6467
amsraman merged 2 commits intomainfrom
carlos/otp-field

Conversation

@carlosabadia
Copy link
Copy Markdown
Contributor

No description provided.

@carlosabadia carlosabadia requested a review from a team as a code owner May 7, 2026 10:50
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 7, 2026

Greptile Summary

This PR adds a new OTPField component backed by @base-ui/react's OTPFieldPreview, and bumps @base-ui/react from 1.3.0 to 1.4.1 to unlock it.

  • New otp_field.py: Implements OTPFieldRoot, OTPFieldInput, OTPFieldSeparator, and a HighLevelOTPField convenience wrapper that auto-generates Input slots; the wrapper validates that length is a static integer when no children are provided, but skips that check when children are explicitly passed, leaving a path where the required length prop can be silently omitted.
  • base_ui.py version bump: The PACKAGE_VERSION change from 1.3.0 to 1.4.1 is package-wide and upgrades the pinned dependency for all existing Base UI components (accordion, avatar, dialog, etc.) simultaneously, not just the new OTP field.
  • __init__.py: otp_field is registered correctly in the lazy-loader mapping.

Confidence Score: 3/5

The new OTP field logic is mostly sound, but two issues make this worth pausing on before merge: the high-level wrapper can produce a component missing its required length prop, and the shared version bump touches every existing Base UI component in the package.

The HighLevelOTPField.create path that accepts explicit children forwards all props to OTPFieldRoot.create without checking for the required length prop, so callers who provide children but omit length will silently render a broken component. The version bump in base_ui.py is cross-cutting and upgrades the pinned @base-ui/react for every component in the package with no re-testing evidence noted in the PR.

otp_field.py (the children + length validation gap) and base_ui.py (the package-wide version bump).

Important Files Changed

Filename Overview
packages/reflex-components-internal/src/reflex_components_internal/components/base/otp_field.py New OTPField component with Root/Input/Separator sub-components and a high-level wrapper; the high-level create only validates length on the no-children path, leaving the children path able to silently omit the required length prop.
packages/reflex-components-internal/src/reflex_components_internal/components/base_ui.py Bumps @base-ui/react from 1.3.0 to 1.4.1; required for OTPFieldPreview but upgrades the pinned version for all existing BaseUI components in the package without explicit re-testing coverage noted.
packages/reflex-components-internal/src/reflex_components_internal/init.py Adds otp_field to the lazy-loader mapping in alphabetical order; straightforward and correct.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["otp_field(…)"] --> B{"children provided?"}
    B -- "No" --> C{"length is int?"}
    C -- "No" --> D["raise TypeError"]
    C -- "Yes" --> E["length > 0? (no guard currently)"]
    E -- "generate N OTPFieldInput slots" --> F["OTPFieldRoot.create(children, **props)"]
    B -- "Yes" --> G{"length in props?\n(no validation)"}
    G -- "Yes" --> F
    G -- "No (silent)" --> H["OTPFieldRoot.create(children)\nlength=undefined → runtime error"]
    F --> I["Rendered OTPField in DOM"]
Loading

Reviews (1): Last reviewed commit: "add otp field to reflex components inter..." | Re-trigger Greptile

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented May 7, 2026

Merging this PR will not alter performance

✅ 24 untouched benchmarks
⏩ 2 skipped benchmarks1


Comparing carlos/otp-field (b9d915e) with main (1ffc3b5)

Open in CodSpeed

Footnotes

  1. 2 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@amsraman amsraman merged commit 2df5344 into main May 7, 2026
68 of 69 checks passed
@amsraman amsraman deleted the carlos/otp-field branch May 7, 2026 16:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants