> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.

# Password Toggle Field

> A password input with a toggle to show or hide the password.

## Overview

Password Toggle Field provides an enhanced password input with a built-in toggle button to switch between hiding and showing the password text. This improves usability by allowing users to verify their input.

## Features

* Toggle visibility of password text
* Custom icons for show/hide states
* Full keyboard navigation
* Works inside forms
* Can be controlled or uncontrolled
* Accessible by default with proper ARIA attributes

## Installation

```bash theme={null}
npm install @radix-ui/react-password-toggle-field
```

## Anatomy

```jsx theme={null}
import * as PasswordField from '@radix-ui/react-password-toggle-field';

export default () => (
  <PasswordField.Root>
    <PasswordField.Input />
    <PasswordField.Toggle>
      <PasswordField.Icon />
    </PasswordField.Toggle>
  </PasswordField.Root>
);
```

## API Reference

### Root

Contains all the password field parts.

<ParamField path="visible" type="boolean">
  The controlled visibility state of the password.
</ParamField>

<ParamField path="defaultVisible" type="boolean" default="false">
  The visibility state when initially rendered (uncontrolled).
</ParamField>

<ParamField path="onVisibleChange" type="(visible: boolean) => void">
  Event handler called when the visibility state changes.
</ParamField>

<ParamField path="disabled" type="boolean">
  When true, prevents the user from interacting with the field.
</ParamField>

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

### Input

The password input element.

<ParamField path="name" type="string">
  The name of the input. Submitted with its owning form as part of a name/value pair.
</ParamField>

<ParamField path="value" type="string">
  The controlled value of the input.
</ParamField>

<ParamField path="defaultValue" type="string">
  The value when initially rendered (uncontrolled).
</ParamField>

<ParamField path="onChange" type="(event: React.ChangeEvent<HTMLInputElement>) => void">
  Event handler called when the input value changes.
</ParamField>

<ParamField path="required" type="boolean">
  When true, indicates that the user must fill the input before submitting the form.
</ParamField>

<ParamField path="autoComplete" type="string">
  Hint for form autofill feature. Common values: "current-password", "new-password".
</ParamField>

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

### Toggle

The button that toggles password visibility.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

### Icon

Renders the appropriate icon based on visibility state.

<ParamField path="forceMount" type="boolean">
  Used to force mounting when more control is needed.
</ParamField>

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

### Slot

A slot for custom content that changes based on visibility state.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

## Example

<CodeGroup>
  ```jsx Basic theme={null}
  import * as PasswordField from '@radix-ui/react-password-toggle-field';
  import { EyeOpenIcon, EyeClosedIcon } from '@radix-ui/react-icons';
  import './styles.css';

  export default () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label htmlFor="password">Password</label>
      <PasswordField.Root className="PasswordRoot">
        <PasswordField.Input
          className="PasswordInput"
          id="password"
          placeholder="Enter password"
        />
        <PasswordField.Toggle className="PasswordToggle" aria-label="Toggle password visibility">
          <PasswordField.Icon>
            {({ visible }) => (visible ? <EyeClosedIcon /> : <EyeOpenIcon />)}
          </PasswordField.Icon>
        </PasswordField.Toggle>
      </PasswordField.Root>
    </div>
  );
  ```

  ```jsx Controlled theme={null}
  import { useState } from 'react';
  import * as PasswordField from '@radix-ui/react-password-toggle-field';
  import { EyeOpenIcon, EyeClosedIcon } from '@radix-ui/react-icons';

  export default () => {
    const [visible, setVisible] = useState(false);
    const [password, setPassword] = useState('');

    return (
      <div>
        <PasswordField.Root visible={visible} onVisibleChange={setVisible}>
          <PasswordField.Input
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Enter password"
          />
          <PasswordField.Toggle>
            <PasswordField.Icon>
              {({ visible }) => (visible ? <EyeClosedIcon /> : <EyeOpenIcon />)}
            </PasswordField.Icon>
          </PasswordField.Toggle>
        </PasswordField.Root>
        <p>Visible: {visible ? 'Yes' : 'No'}</p>
        <p>Length: {password.length}</p>
      </div>
    );
  };
  ```

  ```jsx In Form theme={null}
  import * as PasswordField from '@radix-ui/react-password-toggle-field';
  import { EyeOpenIcon, EyeClosedIcon } from '@radix-ui/react-icons';

  export default () => (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Password:', formData.get('password'));
      }}
    >
      <label htmlFor="password">Password</label>
      <PasswordField.Root>
        <PasswordField.Input
          id="password"
          name="password"
          required
          minLength={8}
          autoComplete="current-password"
        />
        <PasswordField.Toggle>
          <PasswordField.Icon>
            {({ visible }) => (visible ? <EyeClosedIcon /> : <EyeOpenIcon />)}
          </PasswordField.Icon>
        </PasswordField.Toggle>
      </PasswordField.Root>
      <button type="submit">Sign In</button>
    </form>
  );
  ```

  ```jsx Custom Icons theme={null}
  import * as PasswordField from '@radix-ui/react-password-toggle-field';

  export default () => (
    <PasswordField.Root>
      <PasswordField.Input placeholder="Enter password" />
      <PasswordField.Toggle>
        <PasswordField.Slot>
          {({ visible }) => (
            <span style={{ fontSize: 20 }}>
              {visible ? '👁️' : '🙈'}
            </span>
          )}
        </PasswordField.Slot>
      </PasswordField.Toggle>
    </PasswordField.Root>
  );
  ```

  ```jsx New Password theme={null}
  import * as PasswordField from '@radix-ui/react-password-toggle-field';
  import { EyeOpenIcon, EyeClosedIcon } from '@radix-ui/react-icons';

  export default () => (
    <form>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <label htmlFor="new-password">New Password</label>
          <PasswordField.Root>
            <PasswordField.Input
              id="new-password"
              name="newPassword"
              autoComplete="new-password"
              required
              minLength={8}
            />
            <PasswordField.Toggle>
              <PasswordField.Icon>
                {({ visible }) => (visible ? <EyeClosedIcon /> : <EyeOpenIcon />)}
              </PasswordField.Icon>
            </PasswordField.Toggle>
          </PasswordField.Root>
        </div>

        <div>
          <label htmlFor="confirm-password">Confirm Password</label>
          <PasswordField.Root>
            <PasswordField.Input
              id="confirm-password"
              name="confirmPassword"
              autoComplete="new-password"
              required
              minLength={8}
            />
            <PasswordField.Toggle>
              <PasswordField.Icon>
                {({ visible }) => (visible ? <EyeClosedIcon /> : <EyeOpenIcon />)}
              </PasswordField.Icon>
            </PasswordField.Toggle>
          </PasswordField.Root>
        </div>

        <button type="submit">Create Account</button>
      </div>
    </form>
  );
  ```
</CodeGroup>

## Accessibility

<Note>
  The toggle button includes proper ARIA attributes to announce the visibility state to screen readers.
</Note>

### Keyboard Interactions

* **Tab** - Moves focus between the input and toggle button.
* **Space/Enter** - When toggle is focused, toggles password visibility.

### Features

* Input type automatically switches between "password" and "text"
* Toggle button is properly labeled for screen readers
* Visibility state is announced when changed
* Supports all standard input attributes

### Data Attributes

**Root**

* `[data-visible]` - Present when password is visible
* `[data-disabled]` - Present when disabled

**Toggle**

* `[data-visible]` - Present when password is visible
* `[data-disabled]` - Present when disabled

**Icon**

* `[data-visible]` - Present when password is visible