Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Password Toggle Field

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

Styling solution Source file Download runnable sandbox

import { unstable_PasswordToggleField as PasswordToggleField } from "@radix-solid/primitives";
import { EyeClosedIcon, EyeOpenIcon } from "@radix-solid/icons";
import styles from "./styles.module.css";
const PasswordToggleFieldDemo = () => <PasswordToggleField.Root>
		<div class={styles.Root}>
			<PasswordToggleField.Input class={styles.Input} />
			<PasswordToggleField.Toggle class={styles.Toggle}>
				<PasswordToggleField.Icon visible={target => target(EyeOpenIcon, {})} hidden={target => target(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-solid/primitives";
import { EyeClosedIcon, EyeOpenIcon } from "@radix-solid/icons";
export default () => <PasswordToggleField.Root>
		<PasswordToggleField.Input />
		<PasswordToggleField.Toggle>
			<PasswordToggleField.Icon visible={target => target(EyeOpenIcon, {})} hidden={target => target(EyeClosedIcon, {})} />
		</PasswordToggleField.Toggle>
	</PasswordToggleField.Root>;

API Reference

Root

Contains all the parts of a password toggle field.

Prop	Type	Default
`id`	`string`	—
`visible`	`boolean`	—
`defaultVisible`	`boolean`	—
`onVisiblityChange`	`function`	—

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`	—
`visible`	`boolean`	—
`hidden`	`boolean`	—

Icon

Prop	Type	Default
`asChild`	`boolean`	`false`
`visible*`	`boolean`	—
`hidden*`	`boolean`	—

Examples

Basic usage

<PasswordToggleField.Root>
	<PasswordToggleField.Input />
	<PasswordToggleField.Toggle>
		<PasswordToggleField.Icon visible={target => target(EyeOpenIcon, {})} hidden={target => target(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="true" 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>