-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
Description
Bug report
Current Behavior
PasswordToggleField is unavailable in my react vite app.
import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";
# Error: Module '"radix-ui"' has no exported member 'unstable_PasswordToggleField'.ts(2305)
import { PasswordToggleField as PasswordToggleField } from "radix-ui";
# Error: Module '"radix-ui"' has no exported member 'PasswordToggleField'.ts(2305)
When I view ./node_modules/radix-ui/dist/index.d.mts in my code editor, I only see this password related export:
import * as reactOneTimePasswordField from '@radix-ui/react-one-time-password-field';
export { reactOneTimePasswordField as unstable_OneTimePasswordField };
In the attached codesandbox, I can see the following, but it's still not functional:
import * as reactOneTimePasswordField from '@radix-ui/react-one-time-password-field';
export { reactOneTimePasswordField as unstable_OneTimePasswordField };
import * as reactPasswordToggleField from '@radix-ui/react-password-toggle-field';
export { reactPasswordToggleField as unstable_PasswordToggleField };
I followed the tutorial at https://www.radix-ui.com/primitives/docs/components/password-toggle-field
// PasswordToggleFieldDemo.jsx
import * as React from "react";
import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";
import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
import styles from "./styles.module.css";
const PasswordToggleFieldDemo = () => (
<PasswordToggleField.Root>
<div className={styles.Root}>
<PasswordToggleField.Input className={styles.Input} />
<PasswordToggleField.Toggle className={styles.Toggle}>
<PasswordToggleField.Icon
visible={<EyeOpenIcon />}
hidden={<EyeClosedIcon />}
/>
</PasswordToggleField.Toggle>
</div>
</PasswordToggleField.Root>
);
export default PasswordToggleFieldDemo;From package-lock.json:
"node_modules/@radix-ui/react-password-toggle-field": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.1.tgz",
"integrity": "sha512-p5IJUTuyknUMv5VPGEa3fZvjb77cPzCK9w+Em/xHLaTqCVfIhykvdzAe8+X5BmboE9NwxDEBmbWnceFVw4tDdg==",
It is strange that unstable is in the name; could you please clear this up in the documentation radix-ui.com documentation?
Expected behavior
I expected the password field's value to be toggle-able, like in the example at the top of https://www.radix-ui.com/primitives/docs/components/password-toggle-field
Reproducible example
https://codesandbox.io/p/sandbox/prod-glade-7q65r8
Suggested solution
Additional context
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | @radix-ui/react-form | ^0.1.4 |
| @radix-ui/react-password-toggle-field | ^0.1.1 | |
| React | react | ^19.0.0 |
| Browser | Chrome | Version 135.0.7049.115 (Official Build) (arm64) |
| Assistive tech | n/a | |
| Node | n/a | |
| npm/yarn/pnpm | npm | 10.9.1 |
| Operating System | macOS | 14.4.1 (23E224) |
// package-lock.json
"dependencies": {
"@radix-ui/react-form": "^0.1.4",
"@radix-ui/react-password-toggle-field": "^0.1.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.5.3",
"remark-gfm": "^4.0.1",
"vite-plugin-pages": "^0.33.0"
},
Metadata
Metadata
Assignees
Labels
No labels