Password Toggle Field

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

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

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

Import all parts and piece them together.

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

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

Renders a the input containing the password value.

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

Examples

Basic usage

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

With `Slot`

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

With `Slot` + `render` prop

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