# Password Toggle Field

A password input field with an integrated button to toggle the value's visibility.

## 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](#anatomy)

Import all parts and piece them together.

```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 Reference](#api-reference)

### [Root](#root)

Contains all the parts of a password toggle field.

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

Renders a the input containing the password value.

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

## [Examples](#examples)

### [Basic usage](#basic-usage)

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

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

### [With `Slot`](#with-slot)

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

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

### [With `Slot` + `render` prop](#with-slot--render-prop)

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

<!--$-->

<!--/$-->