密码切换字段

一个带有集成按钮以切换值的可见性的密码输入字段。

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

当通过指针切换时，将焦点返回到输入框

当通过键盘或虚拟导航切换时保持按钮焦点

表单提交后将可见性重置为隐藏，以防意外存储

隐式可访问性标签用于基于图标的切换按钮

解剖结构

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

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 参考

Root

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

Prop	Type	Default
`id`	`string`	No default value
`visible`	`boolean`	No default value
`defaultVisible`	`boolean`	No default value
`onVisiblityChange`	`function`	No default value

Input

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`autoComplete`	`enum`	`"current-password"`

Toggle

Prop	Type	Default
`asChild`	`boolean`	`false`

Slot

Prop	Type	Default
`render`	`function`	No default value
`visible`	`boolean`	No default value
`hidden`	`boolean`	No default value

Icon

Prop	Type	Default
`asChild`	`boolean`	`false`
`visible*`	`boolean`	No default value
`hidden*`	`boolean`	No default value

示例

基本用法

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

使用 `Slot`

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

使用 `Slot` + `render` 属性

<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>

上一篇一次性密码 OTP

下一篇弹出框 Popover

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

密码切换字段

Features