password-toggle-field

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Password Toggle Field anatomy

Password Toggle Field is composed of four parts: Root (contains all parts), Input (renders the input containing the password value), Toggle (renders the toggle button), and Icon or Slot (renders conditional content based on visibility state).

Password Toggle Field import

Import Password Toggle Field from radix-ui as: import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";

Password Toggle Field Root props

Root component props: id (string, optional) - used as basis for nested DOM element IDs for accessibility; visible (boolean, optional) - controlled visibility state, must be used with onVisiblityChange; defaultVisible (boolean, optional) - initial visibility state when uncontrolled; onVisiblityChange (function, optional) - event handler called when visibility state changes, signature is (visible: boolean) => void.

Password Toggle Field Input props

Input component props: asChild (boolean, optional, default false) - changes the default rendered element to the one passed as a child, merging props and behavior; autoComplete (string enum, optional, default "current-password") - values are "current-password", "new-password", or "off" - specifies what automated assistance the user agent may provide for filling the field.

Password Toggle Field Toggle props

Toggle component props: asChild (boolean, optional, default false) - changes the default rendered element to the one passed as a child, merging props and behavior.

Password Toggle Field Slot props

Slot component props: render (function, optional) - returns a React node to render with signature (props: { visible: boolean }) => void, used for more control over rendering; visible (node, optional) - the React node to render when field visibility state is visible; hidden (node, optional) - the React node to render when field visibility state is hidden.

Password Toggle Field Icon props

Icon component props: asChild (boolean, optional, default false) - changes the default rendered element to the one passed as a child, merging props and behavior; visible (node, required) - the SVG icon to render when field visibility state is visible; hidden (node, required) - the SVG icon to render when field visibility state is hidden.

Password Toggle Field focus management behavior

Returns focus to the input when toggling with a pointer. Maintains button focus when toggling with keyboard or virtual navigation.

Password Toggle Field visibility reset on form submission

The field resets visibility to hidden after form submission to prevent accidental storage of the password value in visible state.

Password Toggle Field accessible labeling

The toggle button provides implicit accessible labeling for icon-based toggle buttons.

Password Toggle Field basic usage example

Basic usage with Icon component: <PasswordToggleField.Root> <PasswordToggleField.Input /> <PasswordToggleField.Toggle> <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} /> </PasswordToggleField.Toggle> </PasswordToggleField.Root>

Password Toggle Field with Slot example

Using Slot component with emoji: <PasswordToggleField.Root> <PasswordToggleField.Input /> <PasswordToggleField.Toggle> <PasswordToggleField.Slot visible="🙊" hidden="🙈" /> </PasswordToggleField.Toggle> </PasswordToggleField.Root>

Password Toggle Field with Slot and render prop example

Using Slot component with render function: <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>

PasswordToggleField new primitive May 2025

A brand new unstable primitive PasswordToggleField was introduced in May 2025. It provides components for rendering a password input alongside a button to toggle its visibility. Aside from its primary functionality, it includes returning focus to the input when toggling with a pointer, maintaining focus when toggling with keyboard or virtual navigation, resetting visibility to hidden after form submission to prevent accidental storage, and implicit accessible labeling for icon-based toggle buttons. Import using the unstable_ prefix.

PasswordToggleField example

Example of unstable PasswordToggleField usage: import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui"; export function PasswordField() { return ( <PasswordToggleField.Root> <PasswordToggleField.Input /> <PasswordToggleField.Toggle> <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} /> </PasswordToggleField.Toggle> </PasswordToggleField.Root> ); }

Give your agent this brain