# or
yarn add @zag-js/password-input @zag-js/solid
```

## Anatomy

To set up the password-input correctly, you'll need to understand its anatomy
and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the password-input package into your project

```jsx
import * as passwordInput from "@zag-js/password-input"
```

The password-input package exports two key functions:

- `machine` â The state machine logic for the password-input widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
password-input machine in your project ð¥

```jsx
import * as passwordInput from "@zag-js/password-input"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

function PasswordInput() {
  const service = useMachine(passwordInput.machine, { id: createUniqueId() })

  const api = createMemo(() => passwordInput.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <label {...api().getLabelProps()}>Password</label>
      <div {...api().getControlProps()}>
        <input {...api().getInputProps()} />
        <button {...api().getVisibilityTriggerProps()}>
          <span {...api().getIndicatorProps()}>
            <Show when={api().visible} fallback={<EyeOffIcon />}>
              <EyeIcon />
            </Show>
          </span>
        </button>
      </div>
    </div>
  )
}
```

### Setting the initial visibility

Use the `defaultVisible` context property to set the initial visibility of the
password input.

```tsx {3}
const service = useMachine(passwordInput.machine, {
  id: useId(),
  defaultVisible: true,
})
```

### Controlling the visibility

Use the `visible` and `onVisibilityChange` context properties to control the
visibility of the password input.

> The `onVisibilityChange` callback is invoked when the visibility changes.

```tsx {3-5}
const service = useMachine(passwordInput.machine, {
  id: useId(),
  visible: true,
  onVisibilityChange(details) {
    console.log(details)
  },
})
```

### Ignoring password managers

Set the `ignorePasswordManager` context property to `true` to ignore password
managers like 1Password, LastPass, etc.

This is useful when you want to ensure that the password input is not managed by
password managers. **Currently, this only works for 1Password, LastPass,
Bitwarden, Dashlane, and Proton Pass.**

```tsx {3}
const service = useMachine(passwordInput.machine, {
  id: useId(),
  ignorePasswordManager: true,
})
```

**Why is this useful?**

- You might want to use this primitive for non-login scenarios (e.g., "secure
  notes", "temporary passwords")

- In a verify password step, you might want to disable password managers for the
  confirm password field to ensure manual entry

- Building a security-sensitive app where password managers violate compliance
  requirements.

### Managing autocompletion

Configure the `autoComplete` context property to manage autocompletion.

- `new-password` â The user is creating a new password.
- `current-password` â The user is entering an existing password.

```tsx {3}
const service = useMachine(passwordInput.machine, {
  id: useId(),
  autoComplete: "new-password",
})
```

### Making the input required

Set the `required` context property to `true` to make the input required.

```tsx {3}
const service = useMachine(passwordInput.machine, {
  id: useId(),
  required: true,
})
```

### Making the input read only

Set the `readOnly` context property to `true` to make the input read only.

```tsx {3}
const service = useMachine(passwordInput.machine, {
  id: useId(),
  readOnly: true,
})
```

## Styling guide

Earlier, we mentioned that each password-input part has a `data-part` attribute
added to them to select and style them in the DOM.

```css
[data-scope="password-input"][data-part="root"] {
  /* styles for the root part */
}

[data-scope="password-input"][data-part="input"] {
  /* styles for the input part */
}

[data-scope="password-input"][data-part="visibility-trigger"] {
  /* styles for the visibility trigger part */
}

[data-scope="password-input"][data-part="indicator"] {
  /* styles for the indicator part */
}

[data-scope="password-input"][data-part="control"] {
  /* styles for the control part */
}

[data-scope="password-input"][data-part="label"] {
  /* styles for the label part */
}
```

### Visibility State

Use the `[data-state="visible"]` and `[data-state="hidden"]` attributes to style
the password input when it is visible or hidden.

```css
[data-scope="password-input"][data-part="input"][data-state="visible"] {
  /* styles for the visible state (for input) */
}

[data-scope="password-input"][data-part="visibility-trigger"][data-state="visible"] {
  /* styles for the visible state (for visibility trigger) */
}
```

### Disabled State

Use the `[data-disabled]` attribute to style the password input when it is
disabled.

```css
[data-scope="password-input"][data-part="input"][data-disabled] {
  /* styles for the disabled state */
}
```

### Invalid State

Use the `[data-invalid]` attribute to style the password input when it is
invalid.

```css
[data-scope="password-input"][data-part="input"][data-invalid] {
  /* styles for the invalid state */
}
```

### Readonly State

Use the `[data-readonly]` attribute to style the password input when it is read
only.

```css
[data-scope="password-input"][data-part="input"][data-readonly] {
  /* styles for the readonly state */
}
```

## Methods and Properties

### Machine Context

The password-input machine exposes the following context properties:

**`defaultVisible`**
Type: `boolean`
Description: The default visibility of the password input.

**`visible`**
Type: `boolean`
Description: Whether the password input is visible.

**`onVisibilityChange`**
Type: `(details: VisibilityChangeDetails) => void`
Description: Function called when the visibility changes.

**`ids`**
Type: `Partial<{ input: string; visibilityTrigger: string; }>`
Description: The ids of the password input parts

**`disabled`**
Type: `boolean`
Description: Whether the password input is disabled.

**`invalid`**
Type: `boolean`
Description: The invalid state of the password input.

**`readOnly`**
Type: `boolean`
Description: Whether the password input is read only.

**`required`**
Type: `boolean`
Description: Whether the password input is required.

**`translations`**
Type: `Partial<{ visibilityTrigger: (visible: boolean) => string; }>`
Description: The localized messages to use.

**`ignorePasswordManagers`**
Type: `boolean`
Description: When `true`, the input will ignore password managers.

**Only works for the following password managers**
- 1Password, LastPass, Bitwarden, Dashlane, Proton Pass

**`autoComplete`**
Type: `"current-password" | "new-password"`
Description: The autocomplete attribute for the password input.

**`name`**
Type: `string`
Description: The name of the password input.

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

### Machine API

The password-input `api` exposes the following methods:

**`visible`**
Type: `boolean`
Description: Whether the password input is visible.

**`disabled`**
Type: `boolean`
Description: Whether the password input is disabled.

**`invalid`**
Type: `boolean`
Description: Whether the password input is invalid.

**`focus`**
Type: `VoidFunction`
Description: Focus the password input.

**`setVisible`**
Type: `(value: boolean) => void`
Description: Set the visibility of the password input.

**`toggleVisible`**
Type: `VoidFunction`
Description: Toggle the visibility of the password input.
The pin input is optimized for entering a sequence of digits or letters. The
input fields allow one character at a time. When the digit or letter is entered,
focus transfers to the next input in the sequence, until every input is filled.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/pin-input)
[Logic Visualizer](https://zag-visualizer.vercel.app/pin-input)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/pin-input)



**Features**

- Automatically focuses the next field on typing and focuses the previous field
  on deletion
- Supports numeric and alphanumeric values
- Support for masking value (for sensitive data)
- Support for copy/paste to autofill all fields
- Supports fast paste SMS-code

## Installation

To use the pin input machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/pin-input @zag-js/solid