diff --git a/webview-ui/src/components/settings/providers/Anthropic.tsx b/webview-ui/src/components/settings/providers/Anthropic.tsx
index feef788d49ea..b16e85b14ba8 100644
--- a/webview-ui/src/components/settings/providers/Anthropic.tsx
+++ b/webview-ui/src/components/settings/providers/Anthropic.tsx
@@ -7,6 +7,7 @@ import type { ProviderSettings } from "@roo-code/types"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -38,14 +39,12 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.apiKey || ""}
-				type="password"
-				onInput={handleInputChange("apiKey")}
+				onChange={handleInputChange("apiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.anthropicApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Bedrock.tsx b/webview-ui/src/components/settings/providers/Bedrock.tsx
index 2564eda3e542..fa91403b3e31 100644
--- a/webview-ui/src/components/settings/providers/Bedrock.tsx
+++ b/webview-ui/src/components/settings/providers/Bedrock.tsx
@@ -12,6 +12,7 @@ import {
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StandardTooltip } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -88,14 +89,12 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 			{apiConfiguration?.awsUseApiKey ? (
-				<VSCodeTextField
+				<PasswordInputField
 					value={apiConfiguration?.awsApiKey || ""}
-					type="password"
-					onInput={handleInputChange("awsApiKey")}
+					onChange={handleInputChange("awsApiKey")}
 					placeholder={t("settings:placeholders.apiKey")}
-					className="w-full">
-					<label className="block font-medium mb-1">{t("settings:providers.awsApiKey")}</label>
-				</VSCodeTextField>
+					label={t("settings:providers.awsApiKey")}
+					className="w-full"></PasswordInputField>
 			) : apiConfiguration?.awsUseProfile ? (
 				<VSCodeTextField
 					value={apiConfiguration?.awsProfile || ""}
@@ -106,30 +105,24 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 				</VSCodeTextField>
 			) : (
 				<>
-					<VSCodeTextField
+					<PasswordInputField
 						value={apiConfiguration?.awsAccessKey || ""}
-						type="password"
-						onInput={handleInputChange("awsAccessKey")}
+						onChange={handleInputChange("awsAccessKey")}
 						placeholder={t("settings:placeholders.accessKey")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsAccessKey")}</label>
-					</VSCodeTextField>
-					<VSCodeTextField
+						label={t("settings:providers.awsAccessKey")}
+						className="w-full"></PasswordInputField>
+					<PasswordInputField
 						value={apiConfiguration?.awsSecretKey || ""}
-						type="password"
-						onInput={handleInputChange("awsSecretKey")}
+						onChange={handleInputChange("awsSecretKey")}
 						placeholder={t("settings:placeholders.secretKey")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsSecretKey")}</label>
-					</VSCodeTextField>
-					<VSCodeTextField
+						label={t("settings:providers.awsSecretKey")}
+						className="w-full"></PasswordInputField>
+					<PasswordInputField
 						value={apiConfiguration?.awsSessionToken || ""}
-						type="password"
-						onInput={handleInputChange("awsSessionToken")}
+						onChange={handleInputChange("awsSessionToken")}
 						placeholder={t("settings:placeholders.sessionToken")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsSessionToken")}</label>
-					</VSCodeTextField>
+						label={t("settings:providers.awsSessionToken")}
+						className="w-full"></PasswordInputField>
 				</>
 			)}
 			<div>
diff --git a/webview-ui/src/components/settings/providers/Cerebras.tsx b/webview-ui/src/components/settings/providers/Cerebras.tsx
index 4fa35ad07d5e..32eda4ee7419 100644
--- a/webview-ui/src/components/settings/providers/Cerebras.tsx
+++ b/webview-ui/src/components/settings/providers/Cerebras.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Cerebras = ({ apiConfiguration, setApiConfigurationField }: Cerebra
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.cerebrasApiKey || ""}
-				type="password"
-				onInput={handleInputChange("cerebrasApiKey")}
+				onChange={handleInputChange("cerebrasApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.cerebrasApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.cerebrasApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Chutes.tsx b/webview-ui/src/components/settings/providers/Chutes.tsx
index 276ce113657e..81cb134b20c4 100644
--- a/webview-ui/src/components/settings/providers/Chutes.tsx
+++ b/webview-ui/src/components/settings/providers/Chutes.tsx
@@ -1,11 +1,11 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings, OrganizationAllowList } from "@roo-code/types"
 import { chutesDefaultModelId } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import type { RouterModels } from "@roo/api"
 
@@ -42,14 +42,12 @@ export const Chutes = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.chutesApiKey || ""}
-				type="password"
-				onInput={handleInputChange("chutesApiKey")}
+				onChange={handleInputChange("chutesApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.chutesApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.chutesApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/DeepInfra.tsx b/webview-ui/src/components/settings/providers/DeepInfra.tsx
index eee3d3996dc6..fd453c97d68f 100644
--- a/webview-ui/src/components/settings/providers/DeepInfra.tsx
+++ b/webview-ui/src/components/settings/providers/DeepInfra.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import { OrganizationAllowList, type ProviderSettings, deepInfraDefaultModelId } from "@roo-code/types"
 
@@ -8,6 +7,7 @@ import type { RouterModels } from "@roo/api"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -51,14 +51,12 @@ export const DeepInfra = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.deepInfraApiKey || ""}
-				type="password"
-				onInput={handleInputChange("deepInfraApiKey")}
+				onChange={handleInputChange("deepInfraApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.apiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.apiKey")}
+				className="w-full"></PasswordInputField>
 
 			<Button
 				variant="outline"
diff --git a/webview-ui/src/components/settings/providers/DeepSeek.tsx b/webview-ui/src/components/settings/providers/DeepSeek.tsx
index 6f0ac2d92af7..defcf159596a 100644
--- a/webview-ui/src/components/settings/providers/DeepSeek.tsx
+++ b/webview-ui/src/components/settings/providers/DeepSeek.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const DeepSeek = ({ apiConfiguration, setApiConfigurationField }: DeepSee
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.deepSeekApiKey || ""}
-				type="password"
-				onInput={handleInputChange("deepSeekApiKey")}
+				onChange={handleInputChange("deepSeekApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.deepSeekApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.deepSeekApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Doubao.tsx b/webview-ui/src/components/settings/providers/Doubao.tsx
index 5e06c0d6fe1c..7e42b6d7c50d 100644
--- a/webview-ui/src/components/settings/providers/Doubao.tsx
+++ b/webview-ui/src/components/settings/providers/Doubao.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Doubao = ({ apiConfiguration, setApiConfigurationField }: DoubaoPro
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.doubaoApiKey || ""}
-				type="password"
-				onInput={handleInputChange("doubaoApiKey")}
+				onChange={handleInputChange("doubaoApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.doubaoApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.doubaoApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Featherless.tsx b/webview-ui/src/components/settings/providers/Featherless.tsx
index 264e295dcca3..aeb6f607ba77 100644
--- a/webview-ui/src/components/settings/providers/Featherless.tsx
+++ b/webview-ui/src/components/settings/providers/Featherless.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Featherless = ({ apiConfiguration, setApiConfigurationField }: Feat
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.featherlessApiKey || ""}
-				type="password"
-				onInput={handleInputChange("featherlessApiKey")}
+				onChange={handleInputChange("featherlessApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.featherlessApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.featherlessApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Fireworks.tsx b/webview-ui/src/components/settings/providers/Fireworks.tsx
index bb8eb8aa588b..1352bf7009ae 100644
--- a/webview-ui/src/components/settings/providers/Fireworks.tsx
+++ b/webview-ui/src/components/settings/providers/Fireworks.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Fireworks = ({ apiConfiguration, setApiConfigurationField }: Firewo
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.fireworksApiKey || ""}
-				type="password"
-				onInput={handleInputChange("fireworksApiKey")}
+				onChange={handleInputChange("fireworksApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.fireworksApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.fireworksApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Gemini.tsx b/webview-ui/src/components/settings/providers/Gemini.tsx
index ec2e19353c31..7f487e5e7098 100644
--- a/webview-ui/src/components/settings/providers/Gemini.tsx
+++ b/webview-ui/src/components/settings/providers/Gemini.tsx
@@ -6,6 +6,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -35,14 +36,12 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, fromWelcome
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.geminiApiKey || ""}
-				type="password"
-				onInput={handleInputChange("geminiApiKey")}
+				onChange={handleInputChange("geminiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.geminiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.geminiApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Glama.tsx b/webview-ui/src/components/settings/providers/Glama.tsx
index ca1c6590ef4b..bbb458de285c 100644
--- a/webview-ui/src/components/settings/providers/Glama.tsx
+++ b/webview-ui/src/components/settings/providers/Glama.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import { type ProviderSettings, type OrganizationAllowList, glamaDefaultModelId } from "@roo-code/types"
 
@@ -8,6 +7,7 @@ import type { RouterModels } from "@roo/api"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getGlamaAuthUrl } from "@src/oauth/urls"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -44,14 +44,12 @@ export const Glama = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.glamaApiKey || ""}
-				type="password"
-				onInput={handleInputChange("glamaApiKey")}
+				onChange={handleInputChange("glamaApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.glamaApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.glamaApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Groq.tsx b/webview-ui/src/components/settings/providers/Groq.tsx
index a8a910d1acea..64ffb72ed4bc 100644
--- a/webview-ui/src/components/settings/providers/Groq.tsx
+++ b/webview-ui/src/components/settings/providers/Groq.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Groq = ({ apiConfiguration, setApiConfigurationField }: GroqProps)
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.groqApiKey || ""}
-				type="password"
-				onInput={handleInputChange("groqApiKey")}
+				onChange={handleInputChange("groqApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.groqApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.groqApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/HuggingFace.tsx b/webview-ui/src/components/settings/providers/HuggingFace.tsx
index 415ec348f3ea..b8913276ba31 100644
--- a/webview-ui/src/components/settings/providers/HuggingFace.tsx
+++ b/webview-ui/src/components/settings/providers/HuggingFace.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useState, useEffect, useMemo } from "react"
 import { useEvent } from "react-use"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
@@ -11,6 +10,7 @@ import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { SearchableSelect, type SearchableSelectOption } from "@src/components/ui"
 import { cn } from "@src/lib/utils"
 import { formatPrice } from "@/utils/formatPrice"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -166,14 +166,12 @@ export const HuggingFace = ({ apiConfiguration, setApiConfigurationField }: Hugg
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.huggingFaceApiKey || ""}
-				type="password"
-				onInput={handleInputChange("huggingFaceApiKey")}
+				onChange={handleInputChange("huggingFaceApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.huggingFaceApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.huggingFaceApiKey")}
+				className="w-full"></PasswordInputField>
 
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
diff --git a/webview-ui/src/components/settings/providers/IOIntelligence.tsx b/webview-ui/src/components/settings/providers/IOIntelligence.tsx
index 4a7f74797aeb..5c547f42f014 100644
--- a/webview-ui/src/components/settings/providers/IOIntelligence.tsx
+++ b/webview-ui/src/components/settings/providers/IOIntelligence.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import {
 	type ProviderSettings,
@@ -11,6 +10,7 @@ import {
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { ModelPicker } from "../ModelPicker"
 
@@ -45,14 +45,12 @@ export const IOIntelligence = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.ioIntelligenceApiKey || ""}
-				type="password"
-				onInput={handleInputChange("ioIntelligenceApiKey")}
+				onChange={handleInputChange("ioIntelligenceApiKey")}
 				placeholder={t("settings:providers.ioIntelligenceApiKeyPlaceholder")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.ioIntelligenceApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.ioIntelligenceApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/LiteLLM.tsx b/webview-ui/src/components/settings/providers/LiteLLM.tsx
index 6579b2432df2..39d09df0d1e0 100644
--- a/webview-ui/src/components/settings/providers/LiteLLM.tsx
+++ b/webview-ui/src/components/settings/providers/LiteLLM.tsx
@@ -10,6 +10,7 @@ import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -99,14 +100,12 @@ export const LiteLLM = ({
 				<label className="block font-medium mb-1">{t("settings:providers.litellmBaseUrl")}</label>
 			</VSCodeTextField>
 
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.litellmApiKey || ""}
-				type="password"
-				onInput={handleInputChange("litellmApiKey")}
+				onChange={handleInputChange("litellmApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.litellmApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.litellmApiKey")}
+				className="w-full"></PasswordInputField>
 
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
diff --git a/webview-ui/src/components/settings/providers/Mistral.tsx b/webview-ui/src/components/settings/providers/Mistral.tsx
index 666d1421c318..55eabe8f60bb 100644
--- a/webview-ui/src/components/settings/providers/Mistral.tsx
+++ b/webview-ui/src/components/settings/providers/Mistral.tsx
@@ -7,6 +7,7 @@ import type { RouterModels } from "@roo/api"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -32,14 +33,12 @@ export const Mistral = ({ apiConfiguration, setApiConfigurationField }: MistralP
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.mistralApiKey || ""}
-				type="password"
-				onInput={handleInputChange("mistralApiKey")}
+				onChange={handleInputChange("mistralApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<span className="font-medium">{t("settings:providers.mistralApiKey")}</span>
-			</VSCodeTextField>
+				label={t("settings:providers.mistralApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Moonshot.tsx b/webview-ui/src/components/settings/providers/Moonshot.tsx
index db5f162a9d68..84010d774739 100644
--- a/webview-ui/src/components/settings/providers/Moonshot.tsx
+++ b/webview-ui/src/components/settings/providers/Moonshot.tsx
@@ -1,10 +1,11 @@
 import { useCallback } from "react"
-import { VSCodeTextField, VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { cn } from "@/lib/utils"
@@ -45,14 +46,12 @@ export const Moonshot = ({ apiConfiguration, setApiConfigurationField }: Moonsho
 				</VSCodeDropdown>
 			</div>
 			<div>
-				<VSCodeTextField
+				<PasswordInputField
 					value={apiConfiguration?.moonshotApiKey || ""}
-					type="password"
-					onInput={handleInputChange("moonshotApiKey")}
+					onChange={handleInputChange("moonshotApiKey")}
 					placeholder={t("settings:placeholders.apiKey")}
-					className="w-full">
-					<label className="block font-medium mb-1">{t("settings:providers.moonshotApiKey")}</label>
-				</VSCodeTextField>
+					label={t("settings:providers.moonshotApiKey")}
+					className="w-full"></PasswordInputField>
 				<div className="text-sm text-vscode-descriptionForeground">
 					{t("settings:providers.apiKeyStorageNotice")}
 				</div>
diff --git a/webview-ui/src/components/settings/providers/Ollama.tsx b/webview-ui/src/components/settings/providers/Ollama.tsx
index 615d3be40980..eeb55139d3a4 100644
--- a/webview-ui/src/components/settings/providers/Ollama.tsx
+++ b/webview-ui/src/components/settings/providers/Ollama.tsx
@@ -9,6 +9,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useRouterModels } from "@src/components/ui/hooks/useRouterModels"
 import { vscode } from "@src/utils/vscode"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelRecord } from "@roo/api"
@@ -88,17 +89,17 @@ export const Ollama = ({ apiConfiguration, setApiConfigurationField }: OllamaPro
 				<label className="block font-medium mb-1">{t("settings:providers.ollama.baseUrl")}</label>
 			</VSCodeTextField>
 			{apiConfiguration?.ollamaBaseUrl && (
-				<VSCodeTextField
-					value={apiConfiguration?.ollamaApiKey || ""}
-					type="password"
-					onInput={handleInputChange("ollamaApiKey")}
-					placeholder={t("settings:placeholders.apiKey")}
-					className="w-full">
-					<label className="block font-medium mb-1">{t("settings:providers.ollama.apiKey")}</label>
+				<>
+					<PasswordInputField
+						value={apiConfiguration?.ollamaApiKey || ""}
+						onChange={handleInputChange("ollamaApiKey")}
+						placeholder={t("settings:placeholders.apiKey")}
+						label={t("settings:providers.ollama.apiKey")}
+						className="w-full"></PasswordInputField>
 					<div className="text-xs text-vscode-descriptionForeground mt-1">
 						{t("settings:providers.ollama.apiKeyHelp")}
 					</div>
-				</VSCodeTextField>
+				</>
 			)}
 			<VSCodeTextField
 				value={apiConfiguration?.ollamaModelId || ""}
diff --git a/webview-ui/src/components/settings/providers/OpenAI.tsx b/webview-ui/src/components/settings/providers/OpenAI.tsx
index 59b907c45a52..9480dcacfc3d 100644
--- a/webview-ui/src/components/settings/providers/OpenAI.tsx
+++ b/webview-ui/src/components/settings/providers/OpenAI.tsx
@@ -7,6 +7,7 @@ import type { ModelInfo, ProviderSettings } from "@roo-code/types"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StandardTooltip } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -58,14 +59,12 @@ export const OpenAI = ({ apiConfiguration, setApiConfigurationField, selectedMod
 					/>
 				</>
 			)}
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.openAiNativeApiKey || ""}
-				type="password"
-				onInput={handleInputChange("openAiNativeApiKey")}
+				onChange={handleInputChange("openAiNativeApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.openAiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.openAiApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/OpenAICompatible.tsx b/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
index aada8c5f3d57..fed00a99fd95 100644
--- a/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
+++ b/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
@@ -16,6 +16,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button, StandardTooltip } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { convertHeadersToObject } from "../utils/headers"
 import { inputEventTransform, noTransform } from "../transforms"
@@ -129,14 +130,12 @@ export const OpenAICompatible = ({
 				className="w-full">
 				<label className="block font-medium mb-1">{t("settings:providers.openAiBaseUrl")}</label>
 			</VSCodeTextField>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.openAiApiKey || ""}
-				type="password"
-				onInput={handleInputChange("openAiApiKey")}
+				onChange={handleInputChange("openAiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.apiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.apiKey")}
+				className="w-full"></PasswordInputField>
 			<ModelPicker
 				apiConfiguration={apiConfiguration}
 				setApiConfigurationField={setApiConfigurationField}
diff --git a/webview-ui/src/components/settings/providers/OpenRouter.tsx b/webview-ui/src/components/settings/providers/OpenRouter.tsx
index f6cad36bf857..2df8dda27648 100644
--- a/webview-ui/src/components/settings/providers/OpenRouter.tsx
+++ b/webview-ui/src/components/settings/providers/OpenRouter.tsx
@@ -10,6 +10,7 @@ import type { RouterModels } from "@roo/api"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getOpenRouterAuthUrl } from "@src/oauth/urls"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -53,12 +54,7 @@ export const OpenRouter = ({
 
 	return (
 		<>
-			<VSCodeTextField
-				value={apiConfiguration?.openRouterApiKey || ""}
-				type="password"
-				onInput={handleInputChange("openRouterApiKey")}
-				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
+			<>
 				<div className="flex justify-between items-center mb-1">
 					<label className="block font-medium">{t("settings:providers.openRouterApiKey")}</label>
 					{apiConfiguration?.openRouterApiKey && (
@@ -68,7 +64,12 @@ export const OpenRouter = ({
 						/>
 					)}
 				</div>
-			</VSCodeTextField>
+				<PasswordInputField
+					value={apiConfiguration?.openRouterApiKey || ""}
+					onChange={handleInputChange("openRouterApiKey")}
+					placeholder={t("settings:placeholders.apiKey")}
+					className="w-full"></PasswordInputField>
+			</>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Requesty.tsx b/webview-ui/src/components/settings/providers/Requesty.tsx
index a2015e4970a8..de0481d3c0c1 100644
--- a/webview-ui/src/components/settings/providers/Requesty.tsx
+++ b/webview-ui/src/components/settings/providers/Requesty.tsx
@@ -8,6 +8,7 @@ import type { RouterModels } from "@roo/api"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -65,12 +66,7 @@ export const Requesty = ({
 
 	return (
 		<>
-			<VSCodeTextField
-				value={apiConfiguration?.requestyApiKey || ""}
-				type="password"
-				onInput={handleInputChange("requestyApiKey")}
-				placeholder={t("settings:providers.getRequestyApiKey")}
-				className="w-full">
+			<>
 				<div className="flex justify-between items-center mb-1">
 					<label className="block font-medium">{t("settings:providers.requestyApiKey")}</label>
 					{apiConfiguration?.requestyApiKey && (
@@ -80,7 +76,12 @@ export const Requesty = ({
 						/>
 					)}
 				</div>
-			</VSCodeTextField>
+				<PasswordInputField
+					value={apiConfiguration?.requestyApiKey || ""}
+					onChange={handleInputChange("requestyApiKey")}
+					placeholder={t("settings:providers.getRequestyApiKey")}
+					className="w-full"></PasswordInputField>
+			</>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/SambaNova.tsx b/webview-ui/src/components/settings/providers/SambaNova.tsx
index 9202f8d06e5e..aa57495efebb 100644
--- a/webview-ui/src/components/settings/providers/SambaNova.tsx
+++ b/webview-ui/src/components/settings/providers/SambaNova.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const SambaNova = ({ apiConfiguration, setApiConfigurationField }: SambaN
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.sambaNovaApiKey || ""}
-				type="password"
-				onInput={handleInputChange("sambaNovaApiKey")}
+				onChange={handleInputChange("sambaNovaApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.sambaNovaApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.sambaNovaApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Unbound.tsx b/webview-ui/src/components/settings/providers/Unbound.tsx
index 15826d0c0b40..1a0d020534c5 100644
--- a/webview-ui/src/components/settings/providers/Unbound.tsx
+++ b/webview-ui/src/components/settings/providers/Unbound.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useState, useRef } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { useQueryClient } from "@tanstack/react-query"
 
 import { type ProviderSettings, type OrganizationAllowList, unboundDefaultModelId } from "@roo-code/types"
@@ -10,6 +9,7 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { vscode } from "@src/utils/vscode"
 import { Button } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -141,14 +141,12 @@ export const Unbound = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.unboundApiKey || ""}
-				type="password"
-				onInput={handleInputChange("unboundApiKey")}
+				onChange={handleInputChange("unboundApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.unboundApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.unboundApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/VercelAiGateway.tsx b/webview-ui/src/components/settings/providers/VercelAiGateway.tsx
index e816e79e34bf..0d24b206b948 100644
--- a/webview-ui/src/components/settings/providers/VercelAiGateway.tsx
+++ b/webview-ui/src/components/settings/providers/VercelAiGateway.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import { type ProviderSettings, type OrganizationAllowList, vercelAiGatewayDefaultModelId } from "@roo-code/types"
 
@@ -7,6 +6,7 @@ import type { RouterModels } from "@roo/api"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -41,14 +41,12 @@ export const VercelAiGateway = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.vercelAiGatewayApiKey || ""}
-				type="password"
-				onInput={handleInputChange("vercelAiGatewayApiKey")}
+				onChange={handleInputChange("vercelAiGatewayApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.vercelAiGatewayApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.vercelAiGatewayApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/XAI.tsx b/webview-ui/src/components/settings/providers/XAI.tsx
index 619f22390132..1307823a2f04 100644
--- a/webview-ui/src/components/settings/providers/XAI.tsx
+++ b/webview-ui/src/components/settings/providers/XAI.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const XAI = ({ apiConfiguration, setApiConfigurationField }: XAIProps) =>
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.xaiApiKey || ""}
-				type="password"
-				onInput={handleInputChange("xaiApiKey")}
+				onChange={handleInputChange("xaiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.xaiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.xaiApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/ZAi.tsx b/webview-ui/src/components/settings/providers/ZAi.tsx
index c7f44510c134..ea9ec4dbc79e 100644
--- a/webview-ui/src/components/settings/providers/ZAi.tsx
+++ b/webview-ui/src/components/settings/providers/ZAi.tsx
@@ -1,10 +1,11 @@
 import { useCallback } from "react"
-import { VSCodeTextField, VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
 
 import { zaiApiLineConfigs, zaiApiLineSchema, type ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { cn } from "@/lib/utils"
@@ -50,14 +51,12 @@ export const ZAi = ({ apiConfiguration, setApiConfigurationField }: ZAiProps) =>
 				</div>
 			</div>
 			<div>
-				<VSCodeTextField
+				<PasswordInputField
 					value={apiConfiguration?.zaiApiKey || ""}
-					type="password"
-					onInput={handleInputChange("zaiApiKey")}
+					onChange={handleInputChange("zaiApiKey")}
 					placeholder={t("settings:placeholders.apiKey")}
-					className="w-full">
-					<label className="block font-medium mb-1">{t("settings:providers.zaiApiKey")}</label>
-				</VSCodeTextField>
+					label={t("settings:providers.zaiApiKey")}
+					className="w-full"></PasswordInputField>
 				<div className="text-sm text-vscode-descriptionForeground">
 					{t("settings:providers.apiKeyStorageNotice")}
 				</div>
diff --git a/webview-ui/src/components/ui/index.ts b/webview-ui/src/components/ui/index.ts
index ee28b964c54f..f88416b7a3d1 100644
--- a/webview-ui/src/components/ui/index.ts
+++ b/webview-ui/src/components/ui/index.ts
@@ -8,6 +8,7 @@ export * from "./command"
 export * from "./dialog"
 export * from "./dropdown-menu"
 export * from "./input"
+export * from "./password-input"
 export * from "./popover"
 export * from "./progress"
 export * from "./searchable-select"
diff --git a/webview-ui/src/components/ui/password-input.tsx b/webview-ui/src/components/ui/password-input.tsx
new file mode 100644
index 000000000000..aa784d2553e2
--- /dev/null
+++ b/webview-ui/src/components/ui/password-input.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+
+type PasswordInputFieldProps = {
+	value: string
+	onChange: (event: { target: { value: string } }) => void
+	placeholder?: string
+	label?: string
+	className?: string
+	disabled?: boolean
+}
+
+export const PasswordInputField: React.FC<PasswordInputFieldProps> = ({
+	value,
+	onChange,
+	placeholder,
+	label,
+	className = "",
+	disabled = false,
+}) => {
+	const [isPasswordVisible, setIsPasswordVisible] = React.useState(false)
+
+	const togglePasswordVisibility = () => {
+		setIsPasswordVisible(!isPasswordVisible)
+	}
+
+	return (
+		<div className="relative">
+			{label && <label className="block font-medium mb-1">{label}</label>}
+			<div className="relative">
+				<VSCodeTextField
+					value={value}
+					type={isPasswordVisible ? "text" : "password"}
+					onInput={(e) => onChange({ target: { value: (e.target as HTMLInputElement).value } })}
+					placeholder={placeholder}
+					className={className}
+					disabled={disabled}
+				/>
+				<button
+					type="button"
+					onClick={togglePasswordVisibility}
+					className="absolute right-3 top-1/2 transform -translate-y-1/2 text-vscode-descriptionForeground hover:text-vscode-button-foreground cursor-pointer"
+					aria-label={isPasswordVisible ? "Hide password" : "Show password"}>
+					<span className={`codicon ${isPasswordVisible ? "codicon-eye-closed" : "codicon-eye"}`} />
+				</button>
+			</div>
+		</div>
+	)
+}