Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

PasswordField

The PasswordField component provides a text input that masks the entered characters for secure data entry. Use it for passwords, API keys, secret tokens, or any other sensitive information.

For non-sensitive text input, use TextField.

Support

Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the PasswordField component, a text input that masks its content for secure entry of sensitive values like passwords or PINs. It extends standard input props with min/max length constraints and autocomplete support for password managers.

Anchor to label label string required: The text content to display as the field's label. This label is always required for accessibility as it tells users what information the field expects. The label is rendered visually above the field.
Anchor to autocomplete autocomplete | AutocompleteField | `${} ${AutocompleteField}` | `${} ${AutocompleteField}` | `${} ${} ${AutocompleteField}` | boolean: A hint to the browser about the expected content of the field, used to offer autofill suggestions.

true: The field supports autofill, but no specific content type is specified.

false: The field contains sensitive or ephemeral data that should not be autofilled, such as one-time codes.

An AutocompleteField token (such as 'email' or 'street-address'): Tells the browser exactly what data to suggest for this field.

Learn more about the supported autocomplete values.
Anchor to defaultValue defaultValue string | string[]: The initial value of the field when it isn't controlled by state. Use this instead of value when you don't need to manage the field's state yourself. The component tracks its own value internally and reports changes through onChange.
Anchor to disabled disabled boolean Default: false: Whether the field is disabled. When true, the field can't be edited by the user, won't receive focus, and won't be submitted with the form. Use this for fields that aren't relevant in the current context.
Anchor to error error string: An error message to display below the field. When set, the field receives a specific stylistic treatment (typically a red border) to communicate problems that have to be resolved immediately. The string value is displayed as the error message.

Pass undefined or omit this prop to clear the error state.
Anchor to id id string: A unique identifier for the field.
Anchor to maxLength maxLength number: The maximum number of characters the user can enter. If the current value exceeds this limit, then the field will be in an error state. This doesn't prevent the user from typing beyond the limit. Use the error prop to communicate the constraint.
Anchor to minLength minLength number: The minimum number of characters required for a valid input. If the current value is shorter than this limit, then the field will be in a validation error state. This doesn't prevent the user from submitting a shorter value. Use the error prop to communicate the constraint.
Anchor to name name string: An identifier for the field that is unique within the nearest containing Form component.
Anchor to onBlur onBlur () => void: A callback fired when the field loses focus. This is useful for triggering validation after the user finishes interacting with the field, or for tracking which fields have been "touched" in a form.
Anchor to onChange onChange (value: string) => void: A callback that fires when the user finishes editing the field, typically on blur. Only fires if the value changed. Update your state in this callback and pass the new value back through the value prop.

This doesn't fire on every keystroke. Use onInput for real-time responses like clearing validation errors as the user types. Don't use onInput to control value because that can cause issues on lower-powered devices due to asynchronous rendering.
Anchor to onFocus onFocus () => void: A callback fired when the field receives focus. This is useful for clearing errors, showing helper text, or tracking user interaction with form fields.
Anchor to onInput onInput (value: string) => void: A callback that fires on every change the user makes in the field, including each keystroke. The callback receives the current value.

Use onInput for immediate responses like clearing validation errors as the user types. Don't use it to control the field's value prop. Use onChange for that instead.
Anchor to placeholder placeholder string: A short hint displayed inside the field when it's empty. Use placeholder text to show an example of the expected value (such as "100" or "Search by name"). Don't use placeholder text as a substitute for the label as it disappears after the user starts typing.
Anchor to readOnly readOnly boolean Default: false: Whether the field is read-only. Unlike disabled, a read-only field can still receive focus and its value is included when the form is submitted. Use this when the value should be visible and selectable but not editable, such as a computed total.
Anchor to required required boolean: Whether the field needs a value. This requirement adds semantic value to the field, but it won't cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error prop.
Anchor to value value T: The current value for the field. If omitted, then the field will be empty. You should update this value in response to the onChange callback.

AutocompleteSection

A section prefix that scopes autofill data to a specific area of the page. Use this when the same page contains multiple groups of fields that share the same autocomplete tokens, such as two separate shipping address forms. The value must follow the pattern `section-${name}`, for example `"section-shipping-1"`.

`section-${string}`

AutocompleteGroup

The contact information group the autocomplete data should be sourced from. - `shipping`: Autofill with the user's shipping address information. - `billing`: Autofill with the user's billing address information.

'shipping' | 'billing'

Anchor to ExamplesExamples

Anchor to Enter API credentials securelyEnter API credentials securely

Store a warehouse API key without exposing it on screen. This example uses PasswordField to mask the input, with a Button that saves the credentials.

Enter API credentials securely

Store a warehouse API key without exposing it on screen. This example uses `PasswordField` to mask the input, with a [Button](/docs/api/admin-extensions/2025-07/ui-components/actions/button) that saves the credentials.

Enter API credentials securely

import {useState} from 'react';

import {reactExtension, useApi, PasswordField, Button, BlockStack, Text} from '@shopify/ui-extensions-react/admin';

function App() {

const {data, close} = useApi('admin.product-details.action.render');

const [apiKey, setApiKey] = useState('');

return (

<Text fontWeight="bold">Connect warehouse API</Text>

<PasswordField

label="API key"

name="apiKey"

value={apiKey}

onChange={setApiKey}

<Button

variant="primary"

onPress={async () => {

await fetch('/api/integrations/warehouse', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify({apiKey}),

});

close();

}}

Save credentials

</Button>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.action.render',

() => <App />,

);

import {extension, PasswordField, Button, BlockStack, Text} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.action.render',

(root, api) => {

const {data, close} = api;

let apiKey = '';

const stack = root.createComponent(BlockStack);

const heading = root.createComponent(

Text,

{fontWeight: 'bold'},

'Connect warehouse API',

);

const field = root.createComponent(PasswordField, {

label: 'API key',

onChange: (value) => {

apiKey = value;

});

const saveButton = root.createComponent(

Button,

{

variant: 'primary',

onPress: async () => {

await fetch('/api/integrations/warehouse', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify({apiKey}),

});

close();

'Save credentials',

);

stack.appendChild(heading);

stack.appendChild(field);

stack.appendChild(saveButton);

root.appendChild(stack);

);

React

import {useState} from 'react';
import {reactExtension, useApi, PasswordField, Button, BlockStack, Text} from '@shopify/ui-extensions-react/admin';

function App() {
  const {data, close} = useApi('admin.product-details.action.render');
  const [apiKey, setApiKey] = useState('');

  return (
    <BlockStack>
      <Text fontWeight="bold">Connect warehouse API</Text>
      <PasswordField
        label="API key"
        name="apiKey"
        value={apiKey}
        onChange={setApiKey}
      />
      <Button
        variant="primary"
        onPress={async () => {
          await fetch('/api/integrations/warehouse', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({apiKey}),
          });
          close();
        }}
      >
        Save credentials
      </Button>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

TS

import {extension, PasswordField, Button, BlockStack, Text} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root, api) => {
    const {data, close} = api;
    let apiKey = '';

    const stack = root.createComponent(BlockStack);

    const heading = root.createComponent(
      Text,
      {fontWeight: 'bold'},
      'Connect warehouse API',
    );

    const field = root.createComponent(PasswordField, {
      label: 'API key',
      name: 'apiKey',
      onChange: (value) => {
        apiKey = value;
      },
    });

    const saveButton = root.createComponent(
      Button,
      {
        variant: 'primary',
        onPress: async () => {
          await fetch('/api/integrations/warehouse', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({apiKey}),
          });
          close();
        },
      },
      'Save credentials',
    );

    stack.appendChild(heading);
    stack.appendChild(field);
    stack.appendChild(saveButton);
    root.appendChild(stack);
  },
);

Anchor to Validate secret length requirementsValidate secret length requirements

Enforce minimum length requirements on sensitive inputs using the error prop. This example validates that a webhook secret is at least 16 characters, displaying an inline error until the requirement is met to prevent merchants from saving weak secrets.

Validate secret length requirements

import {useState} from 'react';

import {reactExtension, useApi, PasswordField, Button, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

const {close} = useApi('admin.product-details.action.render');

const [secret, setSecret] = useState('');

const [error, setError] = useState(undefined);

return (

<PasswordField

label="Webhook secret"

name="webhookSecret"

required

value={secret}

error={error}

onChange={(value) => {

setSecret(value);

setError(

value.length > 0 && value.length < 16

? 'Secret must be at least 16 characters'

: undefined,

);

}}

<Button

variant="primary"

onPress={async () => {

if (secret.length >= 16) {

await fetch('/api/webhooks/secret', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify({secret}),

});

close();

}

}}

Save webhook secret

</Button>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.action.render',

() => <App />,

);

import {extension, PasswordField, Button, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.action.render',

(root, api) => {

const {close} = api;

let secret = '';

const stack = root.createComponent(BlockStack);

const field = root.createComponent(PasswordField, {

label: 'Webhook secret',

required: true,

onChange: (value) => {

secret = value;

if (value.length > 0 && value.length < 16) {

field.updateProps({error: 'Secret must be at least 16 characters'});

} else {

field.updateProps({error: undefined});

}

});

const saveButton = root.createComponent(

Button,

{

variant: 'primary',

onPress: async () => {

if (secret.length >= 16) {

await fetch('/api/webhooks/secret', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify({secret}),

});

close();

}

'Save webhook secret',

);

stack.appendChild(field);

stack.appendChild(saveButton);

root.appendChild(stack);

);

React

import {useState} from 'react';
import {reactExtension, useApi, PasswordField, Button, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
  const {close} = useApi('admin.product-details.action.render');
  const [secret, setSecret] = useState('');
  const [error, setError] = useState(undefined);

  return (
    <BlockStack>
      <PasswordField
        label="Webhook secret"
        name="webhookSecret"
        required
        value={secret}
        error={error}
        onChange={(value) => {
          setSecret(value);
          setError(
            value.length > 0 && value.length < 16
              ? 'Secret must be at least 16 characters'
              : undefined,
          );
        }}
      />
      <Button
        variant="primary"
        onPress={async () => {
          if (secret.length >= 16) {
            await fetch('/api/webhooks/secret', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({secret}),
            });
            close();
          }
        }}
      >
        Save webhook secret
      </Button>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

TS

import {extension, PasswordField, Button, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root, api) => {
    const {close} = api;
    let secret = '';

    const stack = root.createComponent(BlockStack);

    const field = root.createComponent(PasswordField, {
      label: 'Webhook secret',
      name: 'webhookSecret',
      required: true,
      onChange: (value) => {
        secret = value;
        if (value.length > 0 && value.length < 16) {
          field.updateProps({error: 'Secret must be at least 16 characters'});
        } else {
          field.updateProps({error: undefined});
        }
      },
    });

    const saveButton = root.createComponent(
      Button,
      {
        variant: 'primary',
        onPress: async () => {
          if (secret.length >= 16) {
            await fetch('/api/webhooks/secret', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({secret}),
            });
            close();
          }
        },
      },
      'Save webhook secret',
    );

    stack.appendChild(field);
    stack.appendChild(saveButton);
    root.appendChild(stack);
  },
);

Anchor to Build a service connection formBuild a service connection form

Combine PasswordField with TextField and EmailField to build a complete service connection form. This example collects an API endpoint, account email, and token in a single modal to connect a fulfillment provider.

Build a service connection form

import {reactExtension, useApi, PasswordField, TextField, EmailField, Button, BlockStack, Heading} from '@shopify/ui-extensions-react/admin';

function App() {

const {close} = useApi('admin.product-details.action.render');

return (

<Heading>Connect fulfillment service</Heading>

<Button

variant="primary"

onPress={async () => {

await fetch('/api/fulfillment/connect', {method: 'POST'});

close();

}}

Connect service

</Button>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.action.render',

() => <App />,

);

import {extension, PasswordField, TextField, EmailField, Button, BlockStack, Heading} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.action.render',

(root, api) => {

const {close} = api;

const stack = root.createComponent(BlockStack);

const heading = root.createComponent(

Heading,

{},

'Connect fulfillment service',

);

const endpointField = root.createComponent(TextField, {

label: 'API endpoint',

});

const emailField = root.createComponent(EmailField, {

label: 'Account email',

});

const tokenField = root.createComponent(PasswordField, {

label: 'API token',

});

const connectButton = root.createComponent(

Button,

{

variant: 'primary',

onPress: async () => {

await fetch('/api/fulfillment/connect', {method: 'POST'});

close();

'Connect service',

);

stack.appendChild(heading);

stack.appendChild(endpointField);

stack.appendChild(emailField);

stack.appendChild(tokenField);

stack.appendChild(connectButton);

root.appendChild(stack);

);

React

import {reactExtension, useApi, PasswordField, TextField, EmailField, Button, BlockStack, Heading} from '@shopify/ui-extensions-react/admin';

function App() {
  const {close} = useApi('admin.product-details.action.render');

  return (
    <BlockStack>
      <Heading>Connect fulfillment service</Heading>
      <TextField label="API endpoint" name="endpoint" />
      <EmailField label="Account email" name="accountEmail" />
      <PasswordField label="API token" name="apiToken" />
      <Button
        variant="primary"
        onPress={async () => {
          await fetch('/api/fulfillment/connect', {method: 'POST'});
          close();
        }}
      >
        Connect service
      </Button>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

TS

import {extension, PasswordField, TextField, EmailField, Button, BlockStack, Heading} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root, api) => {
    const {close} = api;

    const stack = root.createComponent(BlockStack);

    const heading = root.createComponent(
      Heading,
      {},
      'Connect fulfillment service',
    );

    const endpointField = root.createComponent(TextField, {
      label: 'API endpoint',
      name: 'endpoint',
    });

    const emailField = root.createComponent(EmailField, {
      label: 'Account email',
      name: 'accountEmail',
    });

    const tokenField = root.createComponent(PasswordField, {
      label: 'API token',
      name: 'apiToken',
    });

    const connectButton = root.createComponent(
      Button,
      {
        variant: 'primary',
        onPress: async () => {
          await fetch('/api/fulfillment/connect', {method: 'POST'});
          close();
        },
      },
      'Connect service',
    );

    stack.appendChild(heading);
    stack.appendChild(endpointField);
    stack.appendChild(emailField);
    stack.appendChild(tokenField);
    stack.appendChild(connectButton);
    root.appendChild(stack);
  },
);

Anchor to Best practicesBest practices

Write a clear label: The required label prop tells merchants what credential to enter. Use specific labels like "Password", "Current password", or "API secret key".
Pair with a confirmation field when creating passwords: When merchants set a new password, provide a second PasswordField for confirmation and validate that both values match.

Anchor to LimitationsLimitations

PasswordField doesn't include a built-in "show/hide password" toggle. The entered text is always masked and can't be revealed.
The component doesn't enforce password strength rules. You must validate the input yourself and use the error prop to communicate requirements.
PasswordField doesn't support the suffix prop available on TextField. There is no built-in way to add a decoration or strength indicator inside the field.

Was this page helpful?