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

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

```jsx
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`The ID of the field. This ID is used as a basis for nested DOM element IDs used for accessibility attributes.                    | `string`   | —       |
| `visible`The controlled visibility state of the field. Must be used in conjunction with `onVisiblityChange`.                         | `boolean`  | —       |
| `defaultVisible`The visibility state of the field when initially rendered. Use when you do not need to control the visibility state. | `boolean`  | —       |
| `onVisiblityChange`Event handler called when the field's visibility state changes.                                                   | `function` | —       |

### Input

Renders a the input containing the password value.

| Prop                                                                                                                                                                                                                        | Type      | Default              |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.                                                     | `boolean` | `false`              |
| `autoComplete`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. | `enum`    | `"current-password"` |

### Toggle

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Slot

| Prop                                                                                                    | Type       | Default |
| ------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `render`A function that returns a Solid element to render. Can be used for more control over rendering. | `function` | —       |
| `visible`The Solid element to render when the field's visibility state is visible.                      | `boolean`  | —       |
| `hidden`The Solid element to render when the field's visibility state is hidden.                        | `boolean`  | —       |

### Icon

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `visible*`The SVG icon to render when the field's visibility state is visible.                                                                                          | `boolean` | —       |
| `hidden*`The SVG icon to render when the field's visibility state is hidden.                                                                                            | `boolean` | —       |

## Examples

### Basic usage

```jsx
<PasswordToggleField.Root>

	<PasswordToggleField.Input />

	<PasswordToggleField.Toggle>

		<PasswordToggleField.Icon visible={target => target(EyeOpenIcon, {})} hidden={target => target(EyeClosedIcon, {})} />

	</PasswordToggleField.Toggle>

</PasswordToggleField.Root>
```

### With `Slot`

```jsx
<PasswordToggleField.Root>

	<PasswordToggleField.Input />

	<PasswordToggleField.Toggle>

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

	</PasswordToggleField.Toggle>

</PasswordToggleField.Root>
```

### With `Slot` + `render` prop

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