Skip to content

PasswordToggleField is unavailable #3534

@junbuilds

Description

@junbuilds

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions