diff --git a/.gitignore b/.gitignore
index 16607eacaa35e..031661119573b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,6 +54,7 @@ site/stats/
 
 # direnv
 .envrc
+.direnv
 *.test
 
 # Loadtesting
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
index d6b3dbdb57509..735c4160c9f67 100644
--- a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
 import { mockApiError } from "testHelpers/entities";
 import { CreateGroupPageView } from "./CreateGroupPageView";
 
@@ -21,3 +22,13 @@ export const WithError: Story = {
 		initialTouched: { name: true },
 	},
 };
+
+export const InvalidName: Story = {
+	play: async ({ canvasElement }) => {
+		const user = userEvent.setup();
+		const body = within(canvasElement.ownerDocument.body);
+		const input = await body.findByLabelText("Name");
+		await user.type(input, "$om3 !nv@lid Name");
+		input.blur();
+	},
+};
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
index fe2ed5158f6de..e1432d78e2716 100644
--- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -12,11 +12,15 @@ import { Stack } from "components/Stack/Stack";
 import { type FormikTouched, useFormik } from "formik";
 import type { FC } from "react";
 import { useNavigate } from "react-router-dom";
-import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+import {
+	getFormHelpers,
+	nameValidator,
+	onChangeTrimmed,
+} from "utils/formUtils";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object({
-	name: Yup.string().required().label("Name"),
+	name: nameValidator("Name"),
 });
 
 export type CreateGroupPageViewProps = {
@@ -62,6 +66,8 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							autoFocus
 							fullWidth
 							label="Name"
+							onChange={onChangeTrimmed(form)}
+							autoComplete="name"
 						/>
 						<TextField
 							{...getFieldHelpers("display_name", {
@@ -69,6 +75,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							})}
 							fullWidth
 							label="Display Name"
+							autoComplete="display_name"
 						/>
 						<IconField
 							{...getFieldHelpers("avatar_url")}
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx
index 9b845c71ab770..ea8dfcc3f3e02 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx
@@ -30,3 +30,13 @@ export const WithError: Story = {
 		});
 	},
 };
+
+export const InvalidName: Story = {
+	play: async ({ canvasElement }) => {
+		const user = userEvent.setup();
+		const body = within(canvasElement.ownerDocument.body);
+		const input = await body.findByLabelText("Name");
+		await user.type(input, "$om3 !nv@lid Name");
+		input.blur();
+	},
+};
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
index 050a42890900a..3f695020d21a9 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
@@ -15,11 +15,15 @@ import { Spinner } from "components/Spinner/Spinner";
 import { useFormik } from "formik";
 import type { FC } from "react";
 import { useNavigate } from "react-router-dom";
-import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+import {
+	getFormHelpers,
+	nameValidator,
+	onChangeTrimmed,
+} from "utils/formUtils";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object({
-	name: Yup.string().required().label("Name"),
+	name: nameValidator("Name"),
 });
 
 export type CreateGroupPageViewProps = {
@@ -69,6 +73,8 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							autoFocus
 							fullWidth
 							label="Name"
+							onChange={onChangeTrimmed(form)}
+							autoComplete="name"
 						/>
 						<TextField
 							{...getFieldHelpers("display_name", {
@@ -76,6 +82,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							})}
 							fullWidth
 							label="Display Name"
+							autoComplete="display_name"
 						/>
 						<IconField
 							{...getFieldHelpers("avatar_url")}

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16115.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16115.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16115.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16115.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>