Password Toggle Field

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

npm install @radix-ui/react-password-toggle-field

Anatomy

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.

boolean

The controlled visibility state of the password.

boolean

default:"false"

The visibility state when initially rendered (uncontrolled).

(visible: boolean) => void

Event handler called when the visibility state changes.

boolean

When true, prevents the user from interacting with the field.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Input

The password input element.

string

The name of the input. Submitted with its owning form as part of a name/value pair.

string

The controlled value of the input.

string

The value when initially rendered (uncontrolled).

(event: React.ChangeEvent<HTMLInputElement>) => void

Event handler called when the input value changes.

boolean

When true, indicates that the user must fill the input before submitting the form.

string

Hint for form autofill feature. Common values: “current-password”, “new-password”.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Toggle

The button that toggles password visibility.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Icon

Renders the appropriate icon based on visibility state.

boolean

Used to force mounting when more control is needed.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Slot

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

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Example

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

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

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

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

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

Accessibility

The toggle button includes proper ARIA attributes to announce the visibility state to screen readers.

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

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

Input

Toggle

Icon

Slot

Example

Accessibility

Keyboard Interactions

Features

Data Attributes

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​Input

​Toggle

​Icon

​Slot

​Example

​Accessibility

​Keyboard Interactions

​Features

​Data Attributes

Overview

Features

Installation

Anatomy

API Reference

Root

Input

Toggle

Icon

Slot

Example

Accessibility

Keyboard Interactions

Features

Data Attributes