# 密码切换字段

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

## Features

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

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

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

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

## [解剖结构](#解剖结构)

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

```jsx
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-参考)

### [Root](#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](#input)

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

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

### [Toggle](#toggle)

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

### [Slot](#slot)

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

### [Icon](#icon)

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

## [示例](#示例)

### [基本用法](#基本用法)

```jsx
<PasswordToggleField.Root>
  <PasswordToggleField.Input />

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

### [使用 `Slot`](#使用-slot)

```jsx
<PasswordToggleField.Root>
  <PasswordToggleField.Input />

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

### [使用 `Slot` + `render` 属性](#使用-slot--render-属性)

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

<!--$-->

<!--/$-->