From 256b38b29be45a1f08736c1422630ec41721390c Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Fri, 14 Aug 2026 15:18:15 -0400
Subject: [PATCH 1/7] feat: add generate password method to password string
 field

---
 .../Form/StringField/StringFieldPassword.tsx  | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/Form/StringField/StringFieldPassword.tsx b/src/components/Form/StringField/StringFieldPassword.tsx
index b393692..bb1a327 100644
--- a/src/components/Form/StringField/StringFieldPassword.tsx
+++ b/src/components/Form/StringField/StringFieldPassword.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
-import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import { EyeIcon, EyeOffIcon, SparklesIcon } from 'lucide-react';
 import { motion } from 'motion/react';
 
-import { Input, Label } from '#components';
+import { Input, Label, Tooltip } from '#components';
+import { useTranslation } from '#hooks';
 import { cn } from '#utils';
 
 import { FieldGroup } from '../FieldGroup/FieldGroup.tsx';
@@ -14,13 +15,23 @@ import type { BaseFieldComponentProps } from '../types.ts';
 export type PasswordStrengthValue = 0 | 1 | 2 | 3 | 4;
 
 export type StringFieldPasswordProps = BaseFieldComponentProps<string> &
-  Extract<StringFormField, { variant: 'password' }>;
+  Extract<StringFormField, { variant: 'password' }> & {
+    /**
+     * A function used to generate a password for this field. When provided, a button is rendered in
+     * the input that fills the field with the returned value and reveals it.
+     *
+     * Declared here rather than coming from `StringFormField`, and should be removed once the
+     * form types package publishes it on the password variant.
+     */
+    generatePassword?: (this: void) => string;
+  };
 
 export const StringFieldPassword = ({
   calculateStrength,
   description,
   disabled,
   error,
+  generatePassword,
   label,
   name,
   readOnly,
@@ -29,6 +40,7 @@ export const StringFieldPassword = ({
 }: StringFieldPasswordProps) => {
   const [strength, setStrength] = useState<null | PasswordStrengthValue>(calculateStrength ? 0 : null);
   const [show, setShow] = useState(false);
+  const { t } = useTranslation();
   useEffect(() => {
     if (calculateStrength) {
       setStrength(value ? calculateStrength(value) : 0);
@@ -43,6 +55,7 @@ export const StringFieldPassword = ({
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Input
+          className={cn(generatePassword ? 'pr-10' : 'pr-8')}
           disabled={disabled || readOnly}
           id={name}
           name={name}
@@ -50,6 +63,29 @@ export const StringFieldPassword = ({
           value={value ?? ''}
           onChange={(event) => setValue(event.target.value)}
         />
+        {generatePassword && (
+          <Tooltip>
+            <Tooltip.Trigger
+              aria-label={t({ en: 'Generate Password', fr: 'Générer un mot de passe' })}
+              // `p-0` neutralizes the padding the button size variant adds, so the geometry matches
+              // the adjacent toggle rather than squeezing the icon inside the fixed width.
+              className="text-muted-foreground absolute right-8 flex h-full w-8 items-center justify-center p-0"
+              disabled={disabled || readOnly}
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                setValue(generatePassword());
+                // A generated password the user cannot read is of little use, so reveal it.
+                setShow(true);
+              }}
+            >
+              <SparklesIcon />
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              <p>{t({ en: 'Generate a password', fr: 'Générer un mot de passe' })}</p>
+            </Tooltip.Content>
+          </Tooltip>
+        )}
         <button
           className="text-muted-foreground absolute right-0 flex h-full w-8 items-center justify-center"
           disabled={disabled || readOnly}

From d2b765ee9db697e10dc7799fa3e8312ccaec4829 Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Fri, 14 Aug 2026 15:18:50 -0400
Subject: [PATCH 2/7] feat: add story of password field with generate password
 tool

---
 .../Form/StringField/StringField.stories.tsx  | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/StringField/StringField.stories.tsx b/src/components/Form/StringField/StringField.stories.tsx
index 8142e5b..d80786e 100644
--- a/src/components/Form/StringField/StringField.stories.tsx
+++ b/src/components/Form/StringField/StringField.stories.tsx
@@ -5,13 +5,16 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { StringField } from './StringField.tsx';
 
 import type { StringFieldComboBoxProps } from './StringFieldComboBox.tsx';
-import type { PasswordStrengthValue } from './StringFieldPassword.tsx';
+import type { PasswordStrengthValue, StringFieldPasswordProps } from './StringFieldPassword.tsx';
 
 type Story = StoryObj<typeof StringField>;
 
 /** Typed to the combobox props so `allowCustomValue`, which the other variants lack, is readable in the decorator */
 type ComboBoxStory = StoryObj<StringFieldComboBoxProps>;
 
+/** Typed to the password props so `generatePassword`, which the other variants lack, may be passed */
+type PasswordStory = StoryObj<StringFieldPasswordProps>;
+
 export default { component: StringField } as Meta<typeof StringField>;
 
 export const Short: Story = {
@@ -98,6 +101,30 @@ export const PasswordWithStrength: Story = {
   ]
 };
 
+export const PasswordWithGenerate: PasswordStory = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<string | undefined>();
+      return (
+        <Story
+          args={{
+            calculateStrength: (password: string) => {
+              return Math.min(password.length, 4) as PasswordStrengthValue;
+            },
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            generatePassword: () => Math.random().toString(36).slice(2, 12),
+            label: 'Password',
+            name: 'text',
+            setValue,
+            value,
+            variant: 'password'
+          }}
+        />
+      );
+    }
+  ]
+};
+
 export const Select: Story = {
   decorators: [
     (Story) => {

From d3a29ef594c2fbc2adecd99efcce2a87cc9705c7 Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Fri, 14 Aug 2026 15:19:09 -0400
Subject: [PATCH 3/7] test: add test for generate password

---
 .../StringField/StringFieldPassword.spec.tsx  | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/components/Form/StringField/StringFieldPassword.spec.tsx

diff --git a/src/components/Form/StringField/StringFieldPassword.spec.tsx b/src/components/Form/StringField/StringFieldPassword.spec.tsx
new file mode 100644
index 0000000..e413f6e
--- /dev/null
+++ b/src/components/Form/StringField/StringFieldPassword.spec.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { StringFieldPassword } from './StringFieldPassword.tsx';
+
+import type { StringFieldPasswordProps } from './StringFieldPassword.tsx';
+
+const TestStringFieldPassword = ({
+  generatePassword,
+  readOnly
+}: Pick<StringFieldPasswordProps, 'generatePassword' | 'readOnly'>) => {
+  const [error, setError] = useState<string[] | undefined>();
+  const [value, setValue] = useState<string | undefined>();
+  return (
+    <StringFieldPassword
+      error={error}
+      generatePassword={generatePassword}
+      kind="string"
+      label="password-field"
+      name="password-field"
+      readOnly={readOnly}
+      setError={setError}
+      setValue={setValue}
+      value={value}
+      variant="password"
+    />
+  );
+};
+
+describe('StringFieldPassword', () => {
+  const getInput = () => screen.getByLabelText<HTMLInputElement>('password-field');
+  const getGenerateButton = () => screen.getByRole('button', { name: 'Generate Password' });
+
+  it('should not render the generate button when generatePassword is not provided', () => {
+    render(<TestStringFieldPassword />);
+    expect(() => getGenerateButton()).toThrow();
+  });
+
+  it('should fill the field with the generated password when the button is clicked', async () => {
+    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
+    await userEvent.click(getGenerateButton());
+    expect(getInput()).toHaveValue('hunter2');
+  });
+
+  it('should reveal the generated password', async () => {
+    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
+    expect(getInput()).toHaveAttribute('type', 'password');
+    await userEvent.click(getGenerateButton());
+    expect(getInput()).toHaveAttribute('type', 'text');
+  });
+
+  it('should allow reaching the generate button with the keyboard', async () => {
+    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
+    getInput().focus();
+    await userEvent.tab();
+    expect(getGenerateButton()).toHaveFocus();
+    await userEvent.keyboard('{Enter}');
+    expect(getInput()).toHaveValue('hunter2');
+  });
+
+  it('should disable the generate button when the field is read-only', () => {
+    render(<TestStringFieldPassword readOnly generatePassword={() => 'hunter2'} />);
+    expect(getGenerateButton()).toBeDisabled();
+  });
+});

From 43414af238a9bf5aeb0072d5ceb249d916f8aef6 Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Mon, 17 Aug 2026 15:51:54 -0400
Subject: [PATCH 4/7] feat: use crypto random for the example password
 generator method

---
 src/components/Form/StringField/StringField.stories.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/StringField/StringField.stories.tsx b/src/components/Form/StringField/StringField.stories.tsx
index d80786e..843c78c 100644
--- a/src/components/Form/StringField/StringField.stories.tsx
+++ b/src/components/Form/StringField/StringField.stories.tsx
@@ -15,6 +15,9 @@ type ComboBoxStory = StoryObj<StringFieldComboBoxProps>;
 /** Typed to the password props so `generatePassword`, which the other variants lack, may be passed */
 type PasswordStory = StoryObj<StringFieldPasswordProps>;
 
+/** Exactly 64 characters, so that reducing a random byte modulo its length stays uniform */
+const PASSWORD_CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_';
+
 export default { component: StringField } as Meta<typeof StringField>;
 
 export const Short: Story = {
@@ -112,7 +115,11 @@ export const PasswordWithGenerate: PasswordStory = {
               return Math.min(password.length, 4) as PasswordStrengthValue;
             },
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
-            generatePassword: () => Math.random().toString(36).slice(2, 12),
+            generatePassword: () =>
+              Array.from(
+                crypto.getRandomValues(new Uint8Array(16)),
+                (byte) => PASSWORD_CHARS[byte % PASSWORD_CHARS.length]
+              ).join(''),
             label: 'Password',
             name: 'text',
             setValue,

From 29af006a9165afc7405b1542ad1c1c10c62a7517 Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Mon, 17 Aug 2026 16:50:28 -0400
Subject: [PATCH 5/7] feat: adjust method and story to reflect and example
 passphrase generator instead

---
 .../Form/StringField/StringField.stories.tsx  | 47 ++++++++++++++++---
 .../Form/StringField/StringFieldPassword.tsx  | 20 ++++----
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/components/Form/StringField/StringField.stories.tsx b/src/components/Form/StringField/StringField.stories.tsx
index 843c78c..2fca80f 100644
--- a/src/components/Form/StringField/StringField.stories.tsx
+++ b/src/components/Form/StringField/StringField.stories.tsx
@@ -15,8 +15,41 @@ type ComboBoxStory = StoryObj<StringFieldComboBoxProps>;
 /** Typed to the password props so `generatePassword`, which the other variants lack, may be passed */
 type PasswordStory = StoryObj<StringFieldPasswordProps>;
 
-/** Exactly 64 characters, so that reducing a random byte modulo its length stays uniform */
-const PASSWORD_CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_';
+/** Exactly 32 words, so that reducing a random byte modulo the list length stays uniform */
+const PASSPHRASE_WORDS = [
+  'anchor',
+  'bramble',
+  'cinder',
+  'cobalt',
+  'dapple',
+  'drift',
+  'ember',
+  'fathom',
+  'flint',
+  'gable',
+  'garnet',
+  'harbor',
+  'hollow',
+  'ivory',
+  'jasper',
+  'kindle',
+  'lantern',
+  'marble',
+  'meadow',
+  'nectar',
+  'opal',
+  'pebble',
+  'quartz',
+  'ripple',
+  'saffron',
+  'thistle',
+  'timber',
+  'umber',
+  'velvet',
+  'willow',
+  'yonder',
+  'zephyr'
+];
 
 export default { component: StringField } as Meta<typeof StringField>;
 
@@ -104,7 +137,7 @@ export const PasswordWithStrength: Story = {
   ]
 };
 
-export const PasswordWithGenerate: PasswordStory = {
+export const PasswordWithPassphraseGenerator: PasswordStory = {
   decorators: [
     (Story) => {
       const [value, setValue] = useState<string | undefined>();
@@ -115,11 +148,11 @@ export const PasswordWithGenerate: PasswordStory = {
               return Math.min(password.length, 4) as PasswordStrengthValue;
             },
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
-            generatePassword: () =>
+            generatePassphrase: () =>
               Array.from(
-                crypto.getRandomValues(new Uint8Array(16)),
-                (byte) => PASSWORD_CHARS[byte % PASSWORD_CHARS.length]
-              ).join(''),
+                crypto.getRandomValues(new Uint8Array(4)),
+                (byte) => PASSPHRASE_WORDS[byte % PASSPHRASE_WORDS.length]
+              ).join('-'),
             label: 'Password',
             name: 'text',
             setValue,
diff --git a/src/components/Form/StringField/StringFieldPassword.tsx b/src/components/Form/StringField/StringFieldPassword.tsx
index bb1a327..4d181b0 100644
--- a/src/components/Form/StringField/StringFieldPassword.tsx
+++ b/src/components/Form/StringField/StringFieldPassword.tsx
@@ -17,13 +17,13 @@ export type PasswordStrengthValue = 0 | 1 | 2 | 3 | 4;
 export type StringFieldPasswordProps = BaseFieldComponentProps<string> &
   Extract<StringFormField, { variant: 'password' }> & {
     /**
-     * A function used to generate a password for this field. When provided, a button is rendered in
-     * the input that fills the field with the returned value and reveals it.
+     * A function used to generate a passphrase for this field. When provided, a button is rendered
+     * in the input that fills the field with the returned value and reveals it.
      *
      * Declared here rather than coming from `StringFormField`, and should be removed once the
      * form types package publishes it on the password variant.
      */
-    generatePassword?: (this: void) => string;
+    generatePassphrase?: (this: void) => string;
   };
 
 export const StringFieldPassword = ({
@@ -31,7 +31,7 @@ export const StringFieldPassword = ({
   description,
   disabled,
   error,
-  generatePassword,
+  generatePassphrase,
   label,
   name,
   readOnly,
@@ -55,7 +55,7 @@ export const StringFieldPassword = ({
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Input
-          className={cn(generatePassword ? 'pr-10' : 'pr-8')}
+          className={cn(generatePassphrase ? 'pr-10' : 'pr-8')}
           disabled={disabled || readOnly}
           id={name}
           name={name}
@@ -63,10 +63,10 @@ export const StringFieldPassword = ({
           value={value ?? ''}
           onChange={(event) => setValue(event.target.value)}
         />
-        {generatePassword && (
+        {generatePassphrase && (
           <Tooltip>
             <Tooltip.Trigger
-              aria-label={t({ en: 'Generate Password', fr: 'Générer un mot de passe' })}
+              aria-label={t({ en: 'Generate Passphrase', fr: 'Générer une phrase de passe' })}
               // `p-0` neutralizes the padding the button size variant adds, so the geometry matches
               // the adjacent toggle rather than squeezing the icon inside the fixed width.
               className="text-muted-foreground absolute right-8 flex h-full w-8 items-center justify-center p-0"
@@ -74,15 +74,15 @@ export const StringFieldPassword = ({
               type="button"
               variant="ghost"
               onClick={() => {
-                setValue(generatePassword());
-                // A generated password the user cannot read is of little use, so reveal it.
+                setValue(generatePassphrase());
+                // A generated passphrase the user cannot read is of little use, so reveal it.
                 setShow(true);
               }}
             >
               <SparklesIcon />
             </Tooltip.Trigger>
             <Tooltip.Content>
-              <p>{t({ en: 'Generate a password', fr: 'Générer un mot de passe' })}</p>
+              <p>{t({ en: 'Generate a passphrase', fr: 'Générer une phrase de passe' })}</p>
             </Tooltip.Content>
           </Tooltip>
         )}

From faed03c908b4e0516eb628fc6cb7aa04b4bb3f15 Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Mon, 17 Aug 2026 16:50:51 -0400
Subject: [PATCH 6/7] test: adjust test to check passphrase instead of password

---
 .../StringField/StringFieldPassword.spec.tsx  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Form/StringField/StringFieldPassword.spec.tsx b/src/components/Form/StringField/StringFieldPassword.spec.tsx
index e413f6e..21961c8 100644
--- a/src/components/Form/StringField/StringFieldPassword.spec.tsx
+++ b/src/components/Form/StringField/StringFieldPassword.spec.tsx
@@ -9,15 +9,15 @@ import { StringFieldPassword } from './StringFieldPassword.tsx';
 import type { StringFieldPasswordProps } from './StringFieldPassword.tsx';
 
 const TestStringFieldPassword = ({
-  generatePassword,
+  generatePassphrase,
   readOnly
-}: Pick<StringFieldPasswordProps, 'generatePassword' | 'readOnly'>) => {
+}: Pick<StringFieldPasswordProps, 'generatePassphrase' | 'readOnly'>) => {
   const [error, setError] = useState<string[] | undefined>();
   const [value, setValue] = useState<string | undefined>();
   return (
     <StringFieldPassword
       error={error}
-      generatePassword={generatePassword}
+      generatePassphrase={generatePassphrase}
       kind="string"
       label="password-field"
       name="password-field"
@@ -32,28 +32,28 @@ const TestStringFieldPassword = ({
 
 describe('StringFieldPassword', () => {
   const getInput = () => screen.getByLabelText<HTMLInputElement>('password-field');
-  const getGenerateButton = () => screen.getByRole('button', { name: 'Generate Password' });
+  const getGenerateButton = () => screen.getByRole('button', { name: 'Generate Passphrase' });
 
-  it('should not render the generate button when generatePassword is not provided', () => {
+  it('should not render the generate button when generatePassphrase is not provided', () => {
     render(<TestStringFieldPassword />);
     expect(() => getGenerateButton()).toThrow();
   });
 
-  it('should fill the field with the generated password when the button is clicked', async () => {
-    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
+  it('should fill the field with the generated passphrase when the button is clicked', async () => {
+    render(<TestStringFieldPassword generatePassphrase={() => 'hunter2'} />);
     await userEvent.click(getGenerateButton());
     expect(getInput()).toHaveValue('hunter2');
   });
 
-  it('should reveal the generated password', async () => {
-    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
+  it('should reveal the generated passphrase', async () => {
+    render(<TestStringFieldPassword generatePassphrase={() => 'hunter2'} />);
     expect(getInput()).toHaveAttribute('type', 'password');
     await userEvent.click(getGenerateButton());
     expect(getInput()).toHaveAttribute('type', 'text');
   });
 
   it('should allow reaching the generate button with the keyboard', async () => {
-    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
+    render(<TestStringFieldPassword generatePassphrase={() => 'hunter2'} />);
     getInput().focus();
     await userEvent.tab();
     expect(getGenerateButton()).toHaveFocus();
@@ -62,7 +62,7 @@ describe('StringFieldPassword', () => {
   });
 
   it('should disable the generate button when the field is read-only', () => {
-    render(<TestStringFieldPassword readOnly generatePassword={() => 'hunter2'} />);
+    render(<TestStringFieldPassword readOnly generatePassphrase={() => 'hunter2'} />);
     expect(getGenerateButton()).toBeDisabled();
   });
 });

From 05f8bd82bc8d195ce6e8cba58143596137a84861 Mon Sep 17 00:00:00 2001
From: David Roper <davidroper321@gmail.com>
Date: Wed, 19 Aug 2026 11:24:59 -0400
Subject: [PATCH 7/7] feat: change method name back to password for semantics

---
 .../Form/StringField/StringField.stories.tsx     |  2 +-
 .../StringField/StringFieldPassword.spec.tsx     | 16 ++++++++--------
 .../Form/StringField/StringFieldPassword.tsx     | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Form/StringField/StringField.stories.tsx b/src/components/Form/StringField/StringField.stories.tsx
index 2fca80f..d908d99 100644
--- a/src/components/Form/StringField/StringField.stories.tsx
+++ b/src/components/Form/StringField/StringField.stories.tsx
@@ -148,7 +148,7 @@ export const PasswordWithPassphraseGenerator: PasswordStory = {
               return Math.min(password.length, 4) as PasswordStrengthValue;
             },
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
-            generatePassphrase: () =>
+            generatePassword: () =>
               Array.from(
                 crypto.getRandomValues(new Uint8Array(4)),
                 (byte) => PASSPHRASE_WORDS[byte % PASSPHRASE_WORDS.length]
diff --git a/src/components/Form/StringField/StringFieldPassword.spec.tsx b/src/components/Form/StringField/StringFieldPassword.spec.tsx
index 21961c8..0212838 100644
--- a/src/components/Form/StringField/StringFieldPassword.spec.tsx
+++ b/src/components/Form/StringField/StringFieldPassword.spec.tsx
@@ -9,15 +9,15 @@ import { StringFieldPassword } from './StringFieldPassword.tsx';
 import type { StringFieldPasswordProps } from './StringFieldPassword.tsx';
 
 const TestStringFieldPassword = ({
-  generatePassphrase,
+  generatePassword,
   readOnly
-}: Pick<StringFieldPasswordProps, 'generatePassphrase' | 'readOnly'>) => {
+}: Pick<StringFieldPasswordProps, 'generatePassword' | 'readOnly'>) => {
   const [error, setError] = useState<string[] | undefined>();
   const [value, setValue] = useState<string | undefined>();
   return (
     <StringFieldPassword
       error={error}
-      generatePassphrase={generatePassphrase}
+      generatePassword={generatePassword}
       kind="string"
       label="password-field"
       name="password-field"
@@ -34,26 +34,26 @@ describe('StringFieldPassword', () => {
   const getInput = () => screen.getByLabelText<HTMLInputElement>('password-field');
   const getGenerateButton = () => screen.getByRole('button', { name: 'Generate Passphrase' });
 
-  it('should not render the generate button when generatePassphrase is not provided', () => {
+  it('should not render the generate button when generatePassword is not provided', () => {
     render(<TestStringFieldPassword />);
     expect(() => getGenerateButton()).toThrow();
   });
 
   it('should fill the field with the generated passphrase when the button is clicked', async () => {
-    render(<TestStringFieldPassword generatePassphrase={() => 'hunter2'} />);
+    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
     await userEvent.click(getGenerateButton());
     expect(getInput()).toHaveValue('hunter2');
   });
 
   it('should reveal the generated passphrase', async () => {
-    render(<TestStringFieldPassword generatePassphrase={() => 'hunter2'} />);
+    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
     expect(getInput()).toHaveAttribute('type', 'password');
     await userEvent.click(getGenerateButton());
     expect(getInput()).toHaveAttribute('type', 'text');
   });
 
   it('should allow reaching the generate button with the keyboard', async () => {
-    render(<TestStringFieldPassword generatePassphrase={() => 'hunter2'} />);
+    render(<TestStringFieldPassword generatePassword={() => 'hunter2'} />);
     getInput().focus();
     await userEvent.tab();
     expect(getGenerateButton()).toHaveFocus();
@@ -62,7 +62,7 @@ describe('StringFieldPassword', () => {
   });
 
   it('should disable the generate button when the field is read-only', () => {
-    render(<TestStringFieldPassword readOnly generatePassphrase={() => 'hunter2'} />);
+    render(<TestStringFieldPassword readOnly generatePassword={() => 'hunter2'} />);
     expect(getGenerateButton()).toBeDisabled();
   });
 });
diff --git a/src/components/Form/StringField/StringFieldPassword.tsx b/src/components/Form/StringField/StringFieldPassword.tsx
index 4d181b0..1d1a4c0 100644
--- a/src/components/Form/StringField/StringFieldPassword.tsx
+++ b/src/components/Form/StringField/StringFieldPassword.tsx
@@ -23,7 +23,7 @@ export type StringFieldPasswordProps = BaseFieldComponentProps<string> &
      * Declared here rather than coming from `StringFormField`, and should be removed once the
      * form types package publishes it on the password variant.
      */
-    generatePassphrase?: (this: void) => string;
+    generatePassword?: (this: void) => string;
   };
 
 export const StringFieldPassword = ({
@@ -31,7 +31,7 @@ export const StringFieldPassword = ({
   description,
   disabled,
   error,
-  generatePassphrase,
+  generatePassword,
   label,
   name,
   readOnly,
@@ -55,7 +55,7 @@ export const StringFieldPassword = ({
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Input
-          className={cn(generatePassphrase ? 'pr-10' : 'pr-8')}
+          className={cn(generatePassword ? 'pr-10' : 'pr-8')}
           disabled={disabled || readOnly}
           id={name}
           name={name}
@@ -63,7 +63,7 @@ export const StringFieldPassword = ({
           value={value ?? ''}
           onChange={(event) => setValue(event.target.value)}
         />
-        {generatePassphrase && (
+        {generatePassword && (
           <Tooltip>
             <Tooltip.Trigger
               aria-label={t({ en: 'Generate Passphrase', fr: 'Générer une phrase de passe' })}
@@ -74,7 +74,7 @@ export const StringFieldPassword = ({
               type="button"
               variant="ghost"
               onClick={() => {
-                setValue(generatePassphrase());
+                setValue(generatePassword());
                 // A generated passphrase the user cannot read is of little use, so reveal it.
                 setShow(true);
               }}