Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档案例博客
Components

密码切换字段

¥Password Toggle Field

一个带有内置按钮的密码输入框，用于切换值的可见性。

import * as React from "react";

import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";

import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";



const PasswordToggleFieldDemo = () => (

	<PasswordToggleField.Root>

		<div className="Root">

			<PasswordToggleField.Input className="Input" />

			<PasswordToggleField.Toggle className="Toggle">

				<PasswordToggleField.Icon
					visible={<EyeOpenIcon />}
					hidden={<EyeClosedIcon />}
				/>

			</PasswordToggleField.Toggle>

		</div>

	</PasswordToggleField.Root>

);



export default PasswordToggleFieldDemo;

Features

    Returns focus to the input when toggling with a pointer

    Maintains button focus when toggling with keyboard or virtual navigation

    Resets visibility to hidden after form submission to prevent accidental storage

    Implicit accessible labeling for icon-based toggle buttons

结构

¥Anatomy

导入所有部分并将它们组合在一起。

¥Import all parts and piece them together.

import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";

import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";



export default () => (

	<PasswordToggleField.Root>

		<PasswordToggleField.Input />

		<PasswordToggleField.Toggle>

			<PasswordToggleField.Icon
				visible={<EyeOpenIcon />}
				hidden={<EyeClosedIcon />}
			/>

		</PasswordToggleField.Toggle>

	</PasswordToggleField.Root>

);

API 参考

¥API Reference

根

¥Root

包含密码切换框的所有部分。

¥Contains all the parts of a password toggle field.

PropTypeDefault
id
string
No default value
visible
boolean
No default value
defaultVisible
boolean
No default value
onVisiblityChange
function
No default value

输入

¥Input

渲染包含密码值的输入框。

¥Renders a the input containing the password value.

PropTypeDefault
asChild
boolean
false
autoComplete
enum
"current-password"

切换按钮

¥Toggle

PropTypeDefault
asChild
boolean
false

插槽

¥Slot

PropTypeDefault
render
function
No default value
visible
boolean
No default value
hidden
boolean
No default value

图标

¥Icon

PropTypeDefault
asChild
boolean
false
visible*
boolean
No default value
hidden*
boolean
No default value

示例

¥Examples

基本用法

¥Basic usage

<PasswordToggleField.Root>

	<PasswordToggleField.Input />

	<PasswordToggleField.Toggle>

		<PasswordToggleField.Icon
			visible={<EyeOpenIcon />}
			hidden={<EyeClosedIcon />}
		/>

	</PasswordToggleField.Toggle>

</PasswordToggleField.Root>

使用 Slot

¥With Slot

<PasswordToggleField.Root>

	<PasswordToggleField.Input />

	<PasswordToggleField.Toggle>

		<PasswordToggleField.Slot visible="🙊" hidden="🙈" />

	</PasswordToggleField.Toggle>

</PasswordToggleField.Root>

使用 Slot + render 属性

¥With Slot + render prop

<PasswordToggleField.Root>

	<PasswordToggleField.Input />

	<PasswordToggleField.Toggle>

		<PasswordToggleField.Slot
			render={({ visible }) => (
				<svg aria-hidden viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
					<path d={visible ? "M1 1 L2 2" : "M2 1 L1 2"} />
				</svg>
			)}
		/>

	</PasswordToggleField.Toggle>

</PasswordToggleField.Root>
Previous一次性密码字段
Next弹出框