coder · aslilac · Jun 25, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/database/db2sdk/db2sdk.go b/coderd/database/db2sdk/db2sdk.go
@@ -816,6 +816,7 @@ func PreviewParameter(param previewtypes.Parameter) codersdk.PreviewParameter {
 				Placeholder: param.Styling.Placeholder,
 				Disabled:    param.Styling.Disabled,
 				Label:       param.Styling.Label,
+				MaskInput:   param.Styling.MaskInput,
 			},
 			Mutable:      param.Mutable,
 			DefaultValue: PreviewHCLString(param.DefaultValue),

diff --git a/codersdk/parameters.go b/codersdk/parameters.go
@@ -91,6 +91,7 @@ type PreviewParameterStyling struct {
 	Placeholder *string `json:"placeholder,omitempty"`
 	Disabled    *bool   `json:"disabled,omitempty"`
 	Label       *string `json:"label,omitempty"`
+	MaskInput   *bool   `json:"mask_input,omitempty"`
 }
 
 type PreviewParameterOption struct {

diff --git a/docs/reference/api/schemas.md b/docs/reference/api/schemas.md
diff --git a/docs/reference/api/templates.md b/docs/reference/api/templates.md
diff --git a/go.mod b/go.mod
@@ -483,7 +483,7 @@ require (
 require (
 	github.com/coder/agentapi-sdk-go v0.0.0-20250505131810-560d1d88d225
 	github.com/coder/aisdk-go v0.0.9
-	github.com/coder/preview v1.0.1
+	github.com/coder/preview v1.0.2
 	github.com/fsnotify/fsnotify v1.9.0
 	github.com/mark3labs/mcp-go v0.32.0
 )

diff --git a/go.sum b/go.sum
@@ -916,8 +916,8 @@ github.com/coder/pq v1.10.5-0.20240813183442-0c420cb5a048 h1:3jzYUlGH7ZELIH4XggX
 github.com/coder/pq v1.10.5-0.20240813183442-0c420cb5a048/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0 h1:3A0ES21Ke+FxEM8CXx9n47SZOKOpgSE1bbJzlE4qPVs=
 github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0/go.mod h1:5UuS2Ts+nTToAMeOjNlnHFkPahrtDkmpydBen/3wgZc=
-github.com/coder/preview v1.0.1 h1:f6q+RjNelwnkyXfGbmVlb4dcUOQ0z4mPsb2kuQpFHuU=
-github.com/coder/preview v1.0.1/go.mod h1:efDWGlO/PZPrvdt5QiDhMtTUTkPxejXo9c0wmYYLLjM=
+github.com/coder/preview v1.0.2 h1:ZFfox0PgXcIouB9iWGcZyOtdL0h2a4ju1iPw/dMqsg4=
+github.com/coder/preview v1.0.2/go.mod h1:efDWGlO/PZPrvdt5QiDhMtTUTkPxejXo9c0wmYYLLjM=
 github.com/coder/quartz v0.2.1 h1:QgQ2Vc1+mvzewg2uD/nj8MJ9p9gE+QhGJm+Z+NGnrSE=
 github.com/coder/quartz v0.2.1/go.mod h1:vsiCc+AHViMKH2CQpGIpFgdHIEQsxwm8yCscqKmzbRA=
 github.com/coder/retry v1.5.1 h1:iWu8YnD8YqHs3XwqrqsjoBTAVqT9ml6z9ViJ2wlMiqc=

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx
@@ -8,18 +8,16 @@ const meta: Meta<typeof DynamicParameter> = {
 	parameters: {
 		layout: "centered",
 	},
+	args: {
+		parameter: MockPreviewParameter,
+		onChange: () => {},
+	},
 };
 
 export default meta;
 type Story = StoryObj<typeof DynamicParameter>;
 
-export const TextInput: Story = {
-	args: {
-		parameter: {
-			...MockPreviewParameter,
-		},
-	},
-};
+export const TextInput: Story = {};
 
 export const TextArea: Story = {
 	args: {
@@ -230,3 +228,30 @@ export const AllBadges: Story = {
 		isPreset: true,
 	},
 };
+
+export const MaskedInput: Story = {
+	args: {
+		parameter: {
+			...MockPreviewParameter,
+			form_type: "input",
+			styling: {
+				...MockPreviewParameter.styling,
+				placeholder: "Tell me a secret",
+				mask_input: true,
+			},
+		},
+	},
+};
+
+export const MaskedTextArea: Story = {
+	args: {
+		parameter: {
+			...MockPreviewParameter,
+			form_type: "textarea",
+			styling: {
+				...MockPreviewParameter.styling,
+				mask_input: true,
+			},
+		},
+	},
+};
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -5,6 +5,7 @@ import type {
 	WorkspaceBuildParameter,
 } from "api/typesGenerated";
 import { Badge } from "components/Badge/Badge";
+import { Button } from "components/Button/Button";
 import { Checkbox } from "components/Checkbox/Checkbox";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Input } from "components/Input/Input";
@@ -36,13 +37,16 @@ import { useDebouncedValue } from "hooks/debounce";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import {
 	CircleAlert,
+	Eye,
+	EyeOff,
 	Hourglass,
 	Info,
 	LinkIcon,
 	Settings,
 	TriangleAlert,
 } from "lucide-react";
 import { type FC, useEffect, useId, useRef, useState } from "react";
+import { cn } from "utils/cn";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
 
@@ -265,6 +269,7 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 	const [localValue, setLocalValue] = useState(
 		value !== undefined ? value : validValue(parameter.value),
 	);
+	const [showMaskedInput, setShowMaskedInput] = useState(false);
 	const debouncedLocalValue = useDebouncedValue(localValue, 500);
 	const onChangeEvent = useEffectEvent(onChange);
 	// prevDebouncedValueRef is to prevent calling the onChangeEvent on the initial render
@@ -309,27 +314,56 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 	switch (parameter.form_type) {
 		case "textarea": {
 			return (
-				<Textarea
-					ref={textareaRef}
-					id={id}
-					className="overflow-y-auto max-h-[500px]"
-					value={localValue}
-					onChange={(e) => {
-						const target = e.currentTarget;
-						target.style.height = "auto";
-						target.style.height = `${target.scrollHeight}px`;
-
-						setLocalValue(e.target.value);
-					}}
-					disabled={disabled}
-					placeholder={parameter.styling?.placeholder}
-					required={parameter.required}
-				/>
+				<div className="relative">
+					<Textarea
+						ref={textareaRef}
+						id={id}
+						className={cn(
+							"overflow-y-auto max-h-[500px]",
+							parameter.styling?.mask_input &&
+								!showMaskedInput &&
+								"[-webkit-text-security:disc]",
+						)}
+						value={localValue}
+						onChange={(e) => {
+							const target = e.currentTarget;
+							target.style.height = "auto";
+							target.style.height = `${target.scrollHeight}px`;
+
+							setLocalValue(e.target.value);
+						}}
+						disabled={disabled}
+						placeholder={parameter.styling?.placeholder}
+						required={parameter.required}
+					/>
+					{parameter.styling?.mask_input && (
+						<Button
+							type="button"
+							variant="subtle"
+							size="sm"
+							className="absolute top-1 right-1 h-6 w-6 p-0"
+							onMouseDown={() => setShowMaskedInput(true)}
+							onMouseUp={() => setShowMaskedInput(false)}
+							disabled={disabled}
+						>
+							{showMaskedInput ? (
+								<EyeOff className="h-4 w-4" />
+							) : (
+								<Eye className="h-4 w-4" />
+							)}
+						</Button>
+					)}
+				</div>
 			);
 		}
 
 		case "input": {
-			const inputType = parameter.type === "number" ? "number" : "text";
+			const inputType =
+				parameter.type === "number"
+					? "number"
+					: parameter.styling?.mask_input && !showMaskedInput
+						? "password"
+						: "text";
 			const inputProps: Record<string, unknown> = {};
 
 			if (parameter.type === "number") {
@@ -346,18 +380,37 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 			}
 
 			return (
-				<Input
-					id={id}
-					type={inputType}
-					value={localValue}
-					onChange={(e) => {
-						setLocalValue(e.target.value);
-					}}
-					disabled={disabled}
-					required={parameter.required}
-					placeholder={parameter.styling?.placeholder}
-					{...inputProps}
-				/>
+				<div className="relative">
+					<Input
+						id={id}
+						type={inputType}
+						value={localValue}
+						onChange={(e) => {
+							setLocalValue(e.target.value);
+						}}
+						disabled={disabled}
+						required={parameter.required}
+						placeholder={parameter.styling?.placeholder}
+						{...inputProps}
+					/>
+					{parameter.styling?.mask_input && parameter.type !== "number" && (
+						<Button
+							type="button"
+							variant="subtle"
+							size="sm"
+							className="absolute top-1/2 right-1 h-6 w-6 p-0"
+							onMouseDown={() => setShowMaskedInput(true)}
+							onMouseUp={() => setShowMaskedInput(false)}
+							disabled={disabled}
+						>
+							{showMaskedInput ? (
+								<EyeOff className="h-4 w-4" />
+							) : (
+								<Eye className="h-4 w-4" />
+							)}
+						</Button>
+					)}
+				</div>
 			);
 		}
 	}
@@ -450,9 +503,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 
 			return (
 				<MultiSelectCombobox
-					inputProps={{
-						id: id,
-					}}
+					inputProps={{ id }}
 					options={options}
 					defaultOptions={selectedOptions}
 					onChange={(newValues) => {
@@ -697,7 +748,7 @@ const isValidParameterOption = (
 			if (Array.isArray(parsed)) {
 				values = parsed;
 			}
-		} catch (e) {
+		} catch {
 			return false;
 		}
 
@@ -898,12 +949,12 @@ export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
 			{diagnostics.map((diagnostic, index) => (
 				<div
 					key={`diagnostic-${diagnostic.summary}-${index}`}
-					className={`text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid
-                        ${
-													diagnostic.severity === "error"
-														? "text-content-primary border-border-destructive bg-content-destructive/15"
-														: "text-content-primary border-border-warning bg-content-warning/15"
-												}`}
+					className={cn(
+						"text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid",
+						diagnostic.severity === "error"
+							? "text-content-primary border-border-destructive bg-content-destructive/15"
+							: "text-content-primary border-border-warning bg-content-warning/15",
+					)}
 				>
 					<div className="flex flex-row items-start">
 						{diagnostic.severity === "error" && (