Skip to content

[otp field] Unmark preview#5029

Draft
atomiks wants to merge 1 commit into
mui:masterfrom
atomiks:claude/quizzical-chatelet-118637
Draft

[otp field] Unmark preview#5029
atomiks wants to merge 1 commit into
mui:masterfrom
atomiks:claude/quizzical-chatelet-118637

Conversation

@atomiks

@atomiks atomiks commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Summary

Graduates OTP Field out of preview. It has been stable through several releases, all reported issues are resolved, and the API is settled.

Breaking change: the namespace export is renamed OTPFieldPreviewOTPField. Consumers now import:

-import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import { OTPField } from '@base-ui/react/otp-field';

Follows the Drawer de-preview precedent.

What changed

  • Export (packages/react/src/otp-field/index.ts): export * as OTPFieldPreviewexport * as OTPField.
  • Tests/specs/demos/type docs: updated all usages to the new export name.
  • Docs (otp-field/page.mdx): removed the "in preview" note; fixed the anatomy import; added an "Autofill and password managers" section documenting that 1Password's inline autofill popup only appears for inputs ≥ 80px wide (manual fill from the extension works regardless), with the min-width: 80px CSS workaround.
  • Components list (components/page.mdx): OTP Field [Preview]OTP Field [New].

OTP Field is now stable and should be imported as `{ OTPField }` from
`@base-ui/react/otp-field` instead of `{ OTPFieldPreview }`.

- Rename the namespace export `OTPFieldPreview` -> `OTPField`
- Update tests, specs, demos, and type docs to the new export name
- Remove the preview note and switch the components list tag to `[New]`
- Document password manager autofill behavior (1Password requires an
  input at least 80px wide for its inline popup to appear)
@atomiks atomiks added breaking change Introduces changes that are not backward compatible. component: otp field labels Jun 12, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jun 12, 2026

Copy link
Copy Markdown

commit: 0ef1b08

@code-infra-dashboard

code-infra-dashboard Bot commented Jun 12, 2026

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react ▼-7B(0.00%) ▼-5B(0.00%)

Details of bundle changes

Performance

Total duration: 1,214.30 ms -239.94 ms(-16.5%) | Renders: 50 (+0) | Paint: 1,824.57 ms -359.81 ms(-16.5%)

Test Duration Renders
Checkbox mount (500 instances) 66.51 ms ▼-47.59 ms(-41.7%) 1 (+0)
Select mount (200 instances) 134.96 ms ▼-39.56 ms(-22.7%) 3 (+0)
Scroll Area mount (300 instances) 85.35 ms ▼-24.95 ms(-22.6%) 3 (+0)

9 tests within noise — details


Check out the code infra dashboard for more information about this PR.

@netlify

netlify Bot commented Jun 12, 2026

Copy link
Copy Markdown

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 0ef1b08
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a2bab89412d060008e7021b
😎 Deploy Preview https://deploy-preview-5029--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks atomiks changed the title [otp-field] Unmark preview [otp field] Unmark preview Jun 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. component: otp field

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant