> ## Documentation Index
> Fetch the complete documentation index at: https://www.1password.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Design your website to work best with 1Password

1Password is designed to generate, fill, and save passwords on most websites. You shouldn't have to do anything special to support 1Password on your website, as long as you develop your pages according to best practices. This will make the intention of each page element clear. 1Password will have an easier time understanding your page even when you make changes to it.

<Tip>
  1Password also supports [saving and signing in with passkeys](https://support.1password.com/save-use-passkeys/). Learn how to [design your website to work with passkeys](https://passkeys.dev/docs/intro/what-are-passkeys/).
</Tip>

## Build logical forms

If 1Password has trouble saving or filling on your site, make sure you're following best practices with your forms:

* Use a unique element `id` or `name` for every field and form.
* Enclose `<input>` fields in `<form>` elements.
* Group related fields (like usernames and passwords) together in the same `<form>` element.
* Separate unrelated fields into different `<form>` elements. For example, put registration and sign-in fields in different forms.
* Set the correct `method` on the form. The 1Password browser extension will automate a button click with `element.click()`. If your form doesn't specifically handle this case, the form may be submitted with `get`, which bypasses other listeners and could unintentionally leak credentials in the URL.

### Ignore offers to save or fill specific fields

If you don't want 1Password to offer to save or fill on a field, you can use the `data-1p-ignore` or `data-op-ignore` attribute to tell
1Password it should ignore the field. For example:

```html theme={null}
<input type="text" id="username" name="ig" data-1p-ignore>
```

If your tools don't accept data attributes that start with a digit, you can use `data-op-ignore` instead.

### Password change and reset forms

On password change forms, ask for the current password, the new password, and a password confirmation in that order. This makes the intention of each form element clear. For example:

```html theme={null}
<label for="current-password">Current Password: </label>
<input type="password" name="current-password" id="current-password" autocomplete="current-password" />
<label for="password">New Password: </label>
<input type="password" name="new-password" id="new-password" autocomplete="new-password" />
<label for="confirm-password">Confirm Password: </label>
<input type="password" name="confirm-password" id="confirm-password" autocomplete="new-password" />
```

On password reset and "forgot password" forms, include the username for the password that is being reset. This helps 1Password determine which item to update with the new password. For example:

```html theme={null}
<input style="display: none;" type="text" name="username" id="username" autocomplete="username" value="wendy.appleseed" /></br>
<label for="password">New Password: </label>
<input type="password" name="password" id="new-password" autocomplete="new-password" />
```

## Provide password requirements

1Password can generate passwords that fit your website's password requirements. 1Password uses Apple's [Password Manager Resources <Icon icon="github" />](https://github.com/apple/password-manager-resources) to identify a website's unique password rules along with the [shared credential backends <Icon icon="github" />](https://github.com/apple/password-manager-resources/blob/main/quirks/websites-with-shared-credential-backends.json) file in the same repository for multiple domains that share the same account system.

To provide the rules 1Password will use to generate smart passwords, add the following attributes to each `<input type="password">` element:

* `passwordrules`
* `minlength`
* `maxlength`

[Learn how to create a `passwordrules` attribute. <Icon icon="arrow-up-right-from-square" />](https://developer.apple.com/password-rules/)

## Embrace accessibility

Making your website accessible benefits everyone who uses your website. As a bonus, making your site accessible provides clues to 1Password as well.

When examining a page, 1Password can take advantage of accessibility cues to locate fields:

* Give every field a `<label>` element.

* Use the `for` attribute on your labels to associate them with the appropriate field:

  ```html theme={null}
  <label for="username-field">Username</label>
  <input name="username" id="username-field">
  ```

* Use [ARIA attributes <Icon icon="arrow-up-right-from-square" />](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) to annotate form fields. For example, use the `aria-hidden` attribute on fields that aren't visible.

## Improve reliability

Follow these additional guidelines to make sure 1Password will always work with your site, even when you make changes to it:

* Use `placeholder` attributes on fields instead of overlays.
* Don't use generated field names and IDs.
* Don't dynamically add or remove fields from the DOM. Reuse fields and hide them when you don't need them.
* Use the appropriate `autocomplete` attributes on fields. These attributes make it easier for 1Password to identify your fields. Refer to [this list of available attributes <Icon icon="arrow-up-right-from-square" />](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). For example, add `autocomplete="one-time-code"` to a field where someone can enter a one-time password.

## Get help

Make sure you're testing with [the latest 1Password beta release](https://support.1password.com/betas/).

If you're still having trouble after following the guidelines above, [get help from the 1Password Support Community](https://1password.community/categories/saving-and-filling-logins).