Password Toggle Field

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

<PropsTable data={[ { name: "id", required: false, type: "string", description: ( <span> The ID of the field. This ID is used as a basis for nested DOM element IDs used for accessibility attributes. </span> ), }, { name: "visible", required: false, type: "boolean", description: ( <span> The controlled visibility state of the field. Must be used in conjunction with <Code>onVisiblityChange</Code>. </span> ), }, { name: "defaultVisible", required: false, type: "boolean", description: ( <span> The visibility state of the field when initially rendered. Use when you do not need to control the visibility state. </span> ), }, { name: "onVisiblityChange", required: false, type: "(visible: boolean) => void", typeSimple: "function", description: ( <span> Event handler called when the field's visibility state changes. </span> ), }, ]} />

Input

Renders a the input containing the password value.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "autoComplete",
		required: false,
		type: '"current-password" | "new-password" | "off"',
		typeSimple: "enum",
		default: '"current-password"',
		description: (
			<span>
				Specifies what—if any—permission the user agent has to provide
				automated assistance in filling out form field values, as well as
				guidance to the browser as to the type of information expected in the
				field.
			</span>
		),
	},
]}

/>

Toggle

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

/>

Slot

<PropsTable data={[ { name: "render", required: false, type: "(props: { visible: boolean }) => void", typeSimple: "function", description: ( <span> A function that returns a React node to render. Can be used for more control over rendering. </span> ), }, { name: "visible", required: false, type: "boolean", description: ( <span> The React node to render when the field's visibility state is visible. </span> ), }, { name: "hidden", required: false, type: "boolean", description: ( <span> The React node to render when the field's visibility state is hidden. </span> ), }, ]} />

Icon

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "visible",
		required: true,
		type: "boolean",
		description: (
			<span>
				The SVG icon to render when the field's visibility state is visible.
			</span>
		),
	},
	{
		name: "hidden",
		required: true,
		type: "boolean",
		description: (
			<span>
				The SVG icon to render when the field's visibility state is hidden.
			</span>
		),
	},
]}

/>

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>