From 44c192df524407cf9a02c9133ce1d0c6928c381c Mon Sep 17 00:00:00 2001
From: DerekAgility <derek@agilitycms.com>
Date: Mon, 28 Sep 2026 10:46:29 -0400
Subject: [PATCH] Form controls: 36px single-line height and consistent thin
 focus

Single-line inputs had no fixed height (py-2 + leading-5 + border = 38px),
so they sat 2px taller than the default h-9 Button, and their height shifted
with @tailwindcss/forms and stylesheet order. InputField, TextInput, the
add-on / animated-label inputs, NestedInputButton, TextInputSelect, Select,
Combobox and the DropdownWithMultiSelect trigger are now a fixed h-9.

Focus on text inputs and select triggers is a single 1px violet-700 border.
The ring is zeroed with focus:!ring-0 because a plain focus:ring-0 ties with
the forms plugin's focus rule and loses when a consumer's forms styles load
after plenum's. Error and readonly borders are kept on focus.

Button, both ButtonDropdown halves, Capsule, ToggleSwitch, Checkbox and Radio
show their focus ring for keyboard focus only (focus-visible), not on click.

Adds a Form Control States story, tests for the new classes, a changelog
entry, and bumps the version to 2.6.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  67 +++
 package.json                                  |   2 +-
 stories/atoms/buttons/Button/Button.tsx       |  14 +-
 stories/atoms/buttons/Capsule/Capsule.tsx     |   4 +-
 .../FormControlStates.stories.tsx             | 415 ++++++++++++++++++
 .../inputs/InputField/InputField.tsx          |  13 +-
 .../InputField/tests/InputField.test.tsx      |  64 +++
 .../NestedInputButton/NestedInputButton.tsx   |   4 +-
 .../molecules/inputs/TextInput/TextInput.tsx  |   9 +-
 .../molecules/inputs/checkbox/Checkbox.tsx    |   4 +-
 .../molecules/inputs/combobox/ComboBox.tsx    |  11 +-
 stories/molecules/inputs/radio/Radio.tsx      |  11 +-
 stories/molecules/inputs/select/Select.tsx    |  12 +-
 .../tests/FormControlConsistency.test.tsx     | 248 +++++++++++
 .../inputs/toggleSwitch/ToggleSwitch.tsx      |   2 +-
 .../AnimatedFormInputWithAddons.tsx           |   2 +-
 .../AnimatedLabelInput/AnimatedLabelInput.tsx |   2 +-
 .../ButtonDropdown/ButtonDropdown.tsx         |   4 +-
 .../DropdownWithMultiSelect.tsx               |   2 +-
 .../organisms/TextInputSelect/InputSelect.tsx |  11 +-
 .../TextInputSelect/TextInputSelect.tsx       |  11 +-
 21 files changed, 867 insertions(+), 45 deletions(-)
 create mode 100644 stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx
 create mode 100644 stories/molecules/inputs/InputField/tests/InputField.test.tsx
 create mode 100644 stories/molecules/inputs/tests/FormControlConsistency.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ecbc5e7..ceda3e1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,72 @@
 # Changelog
 
+## 2.6.0
+
+**Visual change for every form.** Single-line inputs are now 2px shorter, and focus styles are
+thinner and consistent. Check forms that set their own input heights or focus styles.
+
+### Changed: single-line controls are 36px, matching Button
+
+Inputs had no fixed height. `py-2` + `leading-5` + a 1px border made them 38px, while the default
+`Button` is `h-9` (36px), so an input next to a button sat 2px taller. The height also changed
+depending on whether `@tailwindcss/forms` was loaded and in which order: 22–24px without it, and
+42px when a consumer's forms styles loaded after plenum's.
+
+These are now a fixed `h-9` (36px) with `py-0` and the text vertically centred, whatever CSS is loaded:
+
+| Control | Before | After |
+| --- | --- | --- |
+| `InputField` (and so `TextInput`, including `date` / `datetime-local`) | 38px | 36px |
+| `FormInputWithAddons`, `AnimatedLabelInput`, `AnimatedFormInputWithAddons` | 38px | 36px |
+| `NestedInputButton` (the add-on button inside the above) | 38px | 36px |
+| `TextInputSelect`: input and native `<select>` segment | 38px | 36px |
+| `Select`: the bordered wrapper (the input fills it with `h-full`) | 38px | 36px |
+| `Combobox` input and chevron | 38px | 36px |
+| `DropdownWithMultiSelect` trigger | 38px | 36px |
+
+Add-on segments and nested buttons now match the input, so each combined control is one flush 36px
+row. The floating labels in `AnimatedLabelInput` / `AnimatedFormInputWithAddons` moved from
+`top-[9px]` to `top-[8px]` to stay centred. `Button`, `ButtonDropdown`, `TextArea` and
+`AnimatedLabelTextArea` are unchanged.
+
+`InputField` still appends your `className` after its own classes. If you forced a height (for
+example `h-9`) you can remove it now. If you pass vertical padding such as `py-2`, remove it; the
+height is fixed, so the padding only shrinks the text area.
+
+### Changed: text inputs and select triggers focus with a single 1px violet-700 border
+
+-   **Text inputs** (`InputField`, `TextInput`, `FormInputWithAddons`, the animated-label inputs,
+    `TextInputSelect`, `Combobox`) previously showed about 2px on focus: a 1px violet border plus
+    `@tailwindcss/forms`' 1px blue ring. `InputField` already had `focus:ring-0`, but it has the same
+    specificity as the forms rule, so it lost whenever the consumer's forms styles loaded after
+    plenum's. Focus is now only the 1px `violet-700` border. The ring is removed with
+    `focus:!ring-0` and the browser outline with `focus:outline-none`, so this holds with or without
+    `@tailwindcss/forms` and regardless of stylesheet order.
+-   **`Select`** used a deliberate 2px (`focus-within:border-primary-800 focus-within:ring-1`). It
+    now uses the same single 1px `violet-700` border, with `focus-within:ring-0`.
+-   **`TextInputSelect`'s `<select>`**, **`Combobox`** and **`NestedInputButton`** used
+    `focus:ring-1 focus:ring-purple-500` plus a purple border. They now use the same 1px `violet-700`
+    border. `NestedInputButton` and the `DropdownWithMultiSelect` trigger show it for keyboard focus
+    only (`focus-visible`).
+-   **Error and readonly states keep their red / gray border on focus.** Previously `Select` and
+    `Combobox` in error turned purple on focus. `TextInput` and `TextInputSelect` now also set
+    `aria-invalid="true"` on the input when `isError` is set.
+
+### Changed: button and toggle focus rings show for keyboard focus only
+
+`Button` (both the `<button>` and `asLink` variants), both halves of `ButtonDropdown`, `Capsule` and
+`ToggleSwitch` applied their 2px purple ring on `focus`, `focus-within` and `active`, so it also
+appeared on mouse click. The ring is now `focus-visible` only: it shows for keyboard focus (WCAG
+2.4.7) but not after a click. `Checkbox` and `Radio` do the same: the forms plugin's `:focus` ring is
+zeroed, and a 2px ring shows on `focus-visible`. This also removes some malformed class strings in
+the `asLink` danger/warning and `Capsule` danger variants.
+
+### Added
+
+-   Story **Design System / molecules / inputs / Form Control States**: every control in default,
+    error and disabled states, keyboard and mouse focus (choose the control in Controls), and an
+    input next to a default `Button` in one row.
+
 ## 2.5.6
 
 ### Fixed — Select no longer opens on focus
diff --git a/package.json b/package.json
index f8a6d412..adb4e931 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.5.7",
+	"version": "2.6.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
diff --git a/stories/atoms/buttons/Button/Button.tsx b/stories/atoms/buttons/Button/Button.tsx
index 29d2ee80..c8fda861 100644
--- a/stories/atoms/buttons/Button/Button.tsx
+++ b/stories/atoms/buttons/Button/Button.tsx
@@ -91,7 +91,7 @@ const _Button = (
 				title: asLink.title,
 				className: twMerge(
 					cn(
-						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 transition-all",
 						{ "min-w-[130px]": applyMinWidth },
 						{ "w-full": fullWidth },
 						{ "px-[11px] py-[7px] text-xs": resolvedSize === "xs" },
@@ -112,11 +112,11 @@ const _Button = (
 								actionType === "alternative"
 						},
 						{
-							" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							" bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 								actionType === "danger"
 						},
 						{
-							" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 <focus-visible:!></focus-visible:!>ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-400 disabled:hover:bg-yellow-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
+							" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 disabled:bg-yellow-400 disabled:hover:bg-yellow-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
 								actionType === "warning"
 						},
 						className ? className : ""
@@ -174,7 +174,7 @@ const _Button = (
 			type="button"
 			className={twMerge(
 				cn(
-					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all h-9",
+					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 transition-all h-9",
 					{ "min-w-[130px]": applyMinWidth },
 					{ "w-full": fullWidth },
 					{ "text-xs": resolvedSize === "xs" },
@@ -195,15 +195,15 @@ const _Button = (
 							actionType === "alternative"
 					},
 					{
-						"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+						"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 							actionType === "danger"
 					},
 					{
-						"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 focus:!ring-red-500 active:bg-red-100 active:ring-red-500 focus-within:!ring-red-500 disabled:bg-white disabled:hover:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
+						"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 active:bg-red-100 disabled:bg-white disabled:hover:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
 							actionType === "danger-secondary"
 					},
 					{
-						"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-300 disabled:hover:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
+						"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 disabled:bg-yellow-300 disabled:hover:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
 							actionType === "warning"
 					},
 					className ? className : ""
diff --git a/stories/atoms/buttons/Capsule/Capsule.tsx b/stories/atoms/buttons/Capsule/Capsule.tsx
index 6570942d..812d8ed4 100644
--- a/stories/atoms/buttons/Capsule/Capsule.tsx
+++ b/stories/atoms/buttons/Capsule/Capsule.tsx
@@ -54,7 +54,7 @@ const Capsule = ({
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2 text-sm  p-2  !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2 text-sm  p-2  !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs rounded-[15px]": size === "xs" },
 				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },
@@ -73,7 +73,7 @@ const Capsule = ({
 						actionType === "alternative"
 				},
 				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ":
+					" bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 ":
 						actionType === "danger"
 				},
 				className ? className : ""
diff --git a/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx b/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx
new file mode 100644
index 00000000..0b94e4c8
--- /dev/null
+++ b/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx
@@ -0,0 +1,415 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import Button from "@/stories/atoms/buttons/Button";
+import InputField from "@/stories/molecules/inputs/InputField";
+import TextInput from "@/stories/molecules/inputs/TextInput";
+import Select from "@/stories/molecules/inputs/select/Select";
+import Combobox from "@/stories/molecules/inputs/combobox/ComboBox";
+import Checkbox from "@/stories/molecules/inputs/checkbox/Checkbox";
+import Radio from "@/stories/molecules/inputs/radio/Radio";
+import ToggleSwitch from "@/stories/molecules/inputs/toggleSwitch/ToggleSwitch";
+import FormInputWithAddons from "@/stories/organisms/FormInputWithAddons";
+import AnimatedLabelInput from "@/stories/organisms/AnimatedLabelInput";
+import AnimatedFormInputWithAddons from "@/stories/organisms/AnimatedFormInputWithAddons";
+import TextInputSelect from "@/stories/organisms/TextInputSelect/TextInputSelect";
+import ButtonDropdown from "@/stories/organisms/ButtonDropdown";
+import DropdownWithMultiSelect from "@/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect";
+
+/**
+ * Every single-line form control side by side, to check that they share one 36px height and one
+ * focus language:
+ *  - text inputs, selects and triggers focus with a single 1px violet-700 border (keyboard and mouse);
+ *  - buttons, checkboxes, radios and toggles show a 2px purple ring for keyboard focus only.
+ */
+
+type State = "default" | "error" | "disabled";
+
+const noop = () => {};
+const selectOptions = [
+	{ label: "Published", value: "published" },
+	{ label: "Staging", value: "staging" }
+];
+const comboItems = [
+	{ id: "1", name: "Blog Posts" },
+	{ id: "2", name: "Authors" }
+];
+const dropdownItems = [[{ key: "dup", label: "Duplicate", onClick: noop }]];
+
+interface ControlDef {
+	/** Stable id, used as the Controls value so it survives Storybook's URL args. */
+	key: string;
+	name: string;
+	/** Which focusable element inside the control to focus, when it has several. */
+	focusIndex?: number;
+	render: (state: State, key: string) => React.ReactNode;
+}
+
+const CONTROLS: ControlDef[] = [
+	{
+		key: "textInput",
+		name: "TextInput",
+		render: (s, k) => (
+			<TextInput
+				id={`${k}-ti`}
+				type="text"
+				value=""
+				placeholder="Placeholder"
+				handleChange={noop}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "textInputDate",
+		name: "TextInput (date)",
+		render: (s, k) => (
+			<TextInput
+				id={`${k}-date`}
+				type="date"
+				value=""
+				handleChange={noop}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "inputField",
+		name: "InputField",
+		render: (s, k) => (
+			<InputField
+				id={`${k}-if`}
+				type="text"
+				value=""
+				placeholder="Placeholder"
+				handleChange={noop}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "formInputWithAddons",
+		name: "FormInputWithAddons",
+		render: (s, k) => (
+			<FormInputWithAddons
+				id={`${k}-fiwa`}
+				type="text"
+				value=""
+				placeholder="Search..."
+				handleChange={noop}
+				trailIcon={{ icon: "IconSearch" }}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "formInputWithAddonsButtonInput",
+		name: "FormInputWithAddons + button (input)",
+		render: (s, k) => (
+			<FormInputWithAddons
+				id={`${k}-fiwab`}
+				type="text"
+				value=""
+				placeholder="Placeholder"
+				handleChange={noop}
+				addonBTN={{ align: "right", ctaLabel: "Edit", icon: { icon: "IconPencil" }, onClick: noop }}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "formInputWithAddonsButtonButton",
+		name: "FormInputWithAddons + button (button)",
+		focusIndex: 1,
+		render: (s, k) => (
+			<FormInputWithAddons
+				id={`${k}-fiwab2`}
+				type="text"
+				value=""
+				placeholder="Placeholder"
+				handleChange={noop}
+				addonBTN={{ align: "right", ctaLabel: "Edit", icon: { icon: "IconPencil" }, onClick: noop }}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "animatedLabelInput",
+		name: "AnimatedLabelInput",
+		render: (s, k) => (
+			<AnimatedLabelInput
+				id={`${k}-ali`}
+				type="text"
+				value=""
+				label={{ display: "Label" }}
+				handleChange={noop}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "animatedFormInputWithAddons",
+		name: "AnimatedFormInputWithAddons",
+		render: (s, k) => (
+			<AnimatedFormInputWithAddons
+				id={`${k}-afiwa`}
+				type="text"
+				value=""
+				label={{ display: "Label" }}
+				handleChange={noop}
+				addonBTN={{ align: "right", ctaLabel: "Edit", icon: { icon: "IconPencil" }, onClick: noop }}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "textInputSelectInput",
+		name: "TextInputSelect (input)",
+		render: (s, k) => (
+			<TextInputSelect
+				id={`${k}-tis`}
+				type="text"
+				value=""
+				placeholder="Placeholder"
+				inputOptions={selectOptions}
+				onSelectOption={noop}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "textInputSelectSelect",
+		name: "TextInputSelect (select)",
+		focusIndex: 1,
+		render: (s, k) => (
+			<TextInputSelect
+				id={`${k}-tis2`}
+				type="text"
+				value=""
+				placeholder="Placeholder"
+				inputOptions={selectOptions}
+				onSelectOption={noop}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "select",
+		name: "Select",
+		render: (s, k) => (
+			<Select
+				id={`${k}-sel`}
+				options={selectOptions}
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "combobox",
+		name: "Combobox",
+		render: (s, k) => (
+			<Combobox
+				id={`${k}-cb`}
+				items={comboItems}
+				keyProperty="id"
+				displayProperty="name"
+				placeholder="Search models"
+				isError={s === "error"}
+				isDisabled={s === "disabled"}
+			/>
+		)
+	},
+	{
+		key: "dropdownWithMultiSelect",
+		name: "DropdownWithMultiSelect",
+		render: (s) =>
+			s === "default" ? (
+				<DropdownWithMultiSelect label="Filter" options={[{ key: "a", label: "Option A", isSelected: false }]} />
+			) : null
+	},
+	{
+		key: "button",
+		name: "Button",
+		render: (s) => (s === "error" ? null : <Button label="Save" disabled={s === "disabled"} />)
+	},
+	{
+		key: "buttonAlternative",
+		name: "Button (alternative)",
+		render: (s) =>
+			s === "error" ? null : <Button label="Cancel" actionType="alternative" disabled={s === "disabled"} />
+	},
+	{
+		key: "buttonDropdownButton",
+		name: "ButtonDropdown (button)",
+		render: (s) =>
+			s === "error" ? null : (
+				<ButtonDropdown
+					button={{ label: "Save", actionType: "primary", disabled: s === "disabled" }}
+					dropDown={{ id: "more", label: "More actions", items: dropdownItems, disabled: s === "disabled" }}
+				/>
+			)
+	},
+	{
+		key: "buttonDropdownTrigger",
+		name: "ButtonDropdown (trigger)",
+		focusIndex: 1,
+		render: (s) =>
+			s === "error" ? null : (
+				<ButtonDropdown
+					button={{ label: "Save", actionType: "primary", disabled: s === "disabled" }}
+					dropDown={{ id: "more", label: "More actions", items: dropdownItems, disabled: s === "disabled" }}
+				/>
+			)
+	},
+	{
+		key: "checkbox",
+		name: "Checkbox",
+		render: (s) => <Checkbox label="Checkbox" isError={s === "error"} isDisabled={s === "disabled"} />
+	},
+	{
+		key: "radio",
+		name: "Radio",
+		render: (s) => <Radio label="Radio" isError={s === "error"} isDisabled={s === "disabled"} />
+	},
+	{
+		key: "toggleSwitch",
+		name: "ToggleSwitch",
+		render: (s, k) =>
+			s === "error" ? null : (
+				<ToggleSwitch id={`${k}-tog`} name={`${k}-tog`} isChecked={false} onChange={noop} disabled={s === "disabled"} />
+			)
+	}
+];
+
+const CONTROL_KEYS = CONTROLS.map((c) => c.key);
+const CONTROL_LABELS = Object.fromEntries(CONTROLS.map((c) => [c.key, c.name]));
+
+const cellStyle: React.CSSProperties = { width: 300, padding: "8px 12px", verticalAlign: "top" };
+
+const StatesTable = ({ states }: { states: State[] }) => (
+	<table className="text-left text-sm">
+		<thead>
+			<tr>
+				<th style={cellStyle} className="font-medium text-gray-500">
+					Control
+				</th>
+				{states.map((s) => (
+					<th key={s} style={cellStyle} className="font-medium capitalize text-gray-500">
+						{s}
+					</th>
+				))}
+			</tr>
+		</thead>
+		<tbody>
+			{CONTROLS.map((c) => (
+				<tr key={c.key} data-control={c.key}>
+					<td style={cellStyle} className="text-gray-700">
+						{c.name}
+					</td>
+					{states.map((s) => (
+						<td key={s} style={cellStyle} data-state={s}>
+							{c.render(s, `${c.key}-${s}`) ?? <span className="text-gray-300">n/a</span>}
+						</td>
+					))}
+				</tr>
+			))}
+		</tbody>
+	</table>
+);
+
+/** An input, a Select and default Buttons in one row: every control should share the same 36px top and bottom edge. */
+const AlignmentRow = () => (
+	<div className="flex items-end gap-2" style={{ maxWidth: 900 }}>
+		<div className="flex-1">
+			<TextInput id="row-ti" type="text" label="Title" value="Hello world" handleChange={noop} />
+		</div>
+		<Button label="Save" />
+		<div className="flex-1">
+			<Select id="row-sel" label="Status" options={selectOptions} value="published" />
+		</div>
+		<div className="flex-1">
+			<FormInputWithAddons
+				id="row-fiwa"
+				type="text"
+				value=""
+				placeholder="Linked content"
+				handleChange={noop}
+				addonBTN={{ align: "right", ctaLabel: "Edit", icon: { icon: "IconPencil" }, onClick: noop }}
+			/>
+		</div>
+		<Button label="Cancel" actionType="alternative" />
+	</div>
+);
+
+interface FocusArgs {
+	control: string;
+}
+
+/**
+ * Focus the chosen control. `focusVisible` makes the browser treat the focus as keyboard (true) or
+ * mouse (false) focus, so :focus-visible styles match what a real Tab or click would show.
+ * Supported in Chromium and Firefox; in other browsers, Tab to or click the control instead.
+ */
+const focusControl = (canvasElement: HTMLElement, key: string, focusVisible: boolean) => {
+	const def = CONTROLS.find((c) => c.key === key);
+	const row = canvasElement.querySelector(`[data-control="${key}"] [data-state="default"]`);
+	const focusables = row?.querySelectorAll<HTMLElement>("input:not([type=hidden]):not([hidden]), select, button");
+	const target = focusables?.[def?.focusIndex ?? 0];
+	target?.focus({ focusVisible } as FocusOptions);
+};
+
+const meta: Meta<FocusArgs> = {
+	title: "Design System/molecules/inputs/Form Control States",
+	parameters: { layout: "padded" },
+	argTypes: {
+		control: { control: { type: "select", labels: CONTROL_LABELS }, options: CONTROL_KEYS }
+	}
+};
+
+export default meta;
+type Story = StoryObj<FocusArgs>;
+
+/** Default, error and disabled states for every single-line control. All of them should be 36px tall. */
+export const States: Story = {
+	render: () => (
+		<div className="flex flex-col gap-8">
+			<AlignmentRow />
+			<StatesTable states={["default", "error", "disabled"]} />
+		</div>
+	)
+};
+
+/** An input next to a default Button in the same row. The edges should line up exactly. */
+export const InputNextToButton: Story = {
+	render: () => <AlignmentRow />
+};
+
+/**
+ * Keyboard focus on the control picked in Controls. Text inputs and selects get a 1px violet-700 border;
+ * buttons, checkboxes, radios and toggles get a 2px purple ring. You can also press Tab in the canvas.
+ */
+export const KeyboardFocus: Story = {
+	args: { control: "textInput" },
+	render: () => <StatesTable states={["default"]} />,
+	play: async ({ canvasElement, args }) => focusControl(canvasElement, args.control, true)
+};
+
+/**
+ * Mouse focus on the control picked in Controls. Text inputs and selects still get the 1px violet-700
+ * border; buttons, checkboxes, radios and toggles show no ring. You can also click a control in the canvas.
+ */
+export const MouseFocus: Story = {
+	args: { control: "button" },
+	render: () => <StatesTable states={["default"]} />,
+	play: async ({ canvasElement, args }) => focusControl(canvasElement, args.control, false)
+};
diff --git a/stories/molecules/inputs/InputField/InputField.tsx b/stories/molecules/inputs/InputField/InputField.tsx
index 775526ed..f8a27356 100644
--- a/stories/molecules/inputs/InputField/InputField.tsx
+++ b/stories/molecules/inputs/InputField/InputField.tsx
@@ -62,6 +62,8 @@ const InputField = (
 	}: IInputFieldProps,
 	ref: React.Ref<HTMLInputElement>
 ) => {
+	// Wrappers such as TextInput style their own error state and signal it through aria-invalid.
+	const isInvalid = isError || rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
 	return (
 		<input
 			{...{
@@ -81,9 +83,14 @@ const InputField = (
 				"aria-invalid": isError,
 				"aria-disabled": isDisabled,
 				className: cn(
-					"peer w-full rounded border border-gray-300 px-3 text-sm font-normal leading-5 outline-offset-0 ring-offset-0 focus:border-violet-700 focus:ring-0   ",
-					isError ? "!border-red-600 !text-red-600 focus:!ring-red-600" : "",
-					isReadonly ? "!border-gray-400 !text-gray-500 focus:!ring-gray-400" : "",
+					// Fixed 36px height to line up with the default Button (h-9).
+					"peer h-9 w-full rounded border border-gray-300 px-3 py-0 text-sm font-normal leading-5 outline-offset-0 ring-offset-0",
+					// Focus is a single 1px border colour change. The `!` keeps @tailwindcss/forms' focus ring and
+					// blue border from winning when a consumer's forms styles load after plenum's stylesheet.
+					"focus:outline-none focus:!ring-0",
+					{ "focus:!border-violet-700": !isInvalid && !isReadonly },
+					isError ? "!border-red-600 !text-red-600" : "",
+					isReadonly ? "!border-gray-400 !text-gray-500" : "",
 					className
 				),
 				...rest
diff --git a/stories/molecules/inputs/InputField/tests/InputField.test.tsx b/stories/molecules/inputs/InputField/tests/InputField.test.tsx
new file mode 100644
index 00000000..2e10575f
--- /dev/null
+++ b/stories/molecules/inputs/InputField/tests/InputField.test.tsx
@@ -0,0 +1,64 @@
+import { vi } from "vitest";
+import InputField from "../InputField";
+import { render, screen } from "@testing-library/react";
+
+const defaultProps = {
+	type: "text" as const,
+	value: "",
+	handleChange: vi.fn()
+};
+
+const getInput = () => screen.getByRole("textbox");
+
+describe("<InputField>", () => {
+	describe("height", () => {
+		it("is a fixed 36px (h-9) with no vertical padding, matching the default Button", () => {
+			render(<InputField {...defaultProps} />);
+			expect(getInput()).toHaveClass("h-9", "py-0", "text-sm", "leading-5");
+			expect(getInput()).not.toHaveClass("py-2");
+		});
+
+		it("appends the consumer className after its own classes", () => {
+			render(<InputField {...defaultProps} className="consumer-class pl-7" />);
+			const classes = getInput().className.split(/\s+/);
+			expect(classes).toContain("h-9");
+			expect(classes[classes.length - 1]).toBe("pl-7");
+			expect(classes.indexOf("consumer-class")).toBeGreaterThan(classes.indexOf("h-9"));
+		});
+	});
+
+	describe("focus", () => {
+		it("zeroes the focus ring with !important so @tailwindcss/forms cannot add one", () => {
+			render(<InputField {...defaultProps} />);
+			expect(getInput()).toHaveClass("focus:!ring-0", "focus:outline-none");
+		});
+
+		it("shows a violet-700 border on focus", () => {
+			render(<InputField {...defaultProps} />);
+			expect(getInput()).toHaveClass("focus:!border-violet-700");
+		});
+
+		it("never adds a focus ring width", () => {
+			render(<InputField {...defaultProps} isError />);
+			expect(getInput().className).not.toMatch(/focus:!?ring-(1|2|red|gray)/);
+		});
+
+		it("keeps the error border on focus", () => {
+			render(<InputField {...defaultProps} isError />);
+			expect(getInput()).toHaveClass("!border-red-600");
+			expect(getInput()).not.toHaveClass("focus:!border-violet-700");
+			expect(getInput()).toHaveAttribute("aria-invalid", "true");
+		});
+
+		it("keeps the error border on focus when a wrapper signals the error with aria-invalid", () => {
+			render(<InputField {...defaultProps} aria-invalid />);
+			expect(getInput()).not.toHaveClass("focus:!border-violet-700");
+		});
+
+		it("keeps the readonly border on focus", () => {
+			render(<InputField {...defaultProps} isReadonly />);
+			expect(getInput()).toHaveClass("!border-gray-400");
+			expect(getInput()).not.toHaveClass("focus:!border-violet-700");
+		});
+	});
+});
diff --git a/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx b/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx
index 276c1b8b..adf52f90 100644
--- a/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx
+++ b/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx
@@ -23,7 +23,9 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	const { ...buttonProps } = props
 	const { onClick } = buttonProps
 	const buttonStyle = cn(
-		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm  focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
+		// h-9 matches InputField so the input and add-on form one flush 36px row. Keyboard focus uses the
+		// same 1px violet border as the input; z-10 lifts it over the input's overlapping edge.
+		"relative flex h-9 items-center space-x-2 px-4 py-0 leading-5 border border-gray-300 text-sm focus:outline-none focus-visible:z-10 focus-visible:!border-violet-700",
 		{
 			"rounded-r text-gray-500 -ml-px": align === "right"
 		},
diff --git a/stories/molecules/inputs/TextInput/TextInput.tsx b/stories/molecules/inputs/TextInput/TextInput.tsx
index 7022fc35..b945bfb6 100644
--- a/stories/molecules/inputs/TextInput/TextInput.tsx
+++ b/stories/molecules/inputs/TextInput/TextInput.tsx
@@ -132,19 +132,20 @@ const TextInput = (
 				name={name}
 				id={id}
 				className={cn(
-					"w-full rounded border py-2 px-3 text-sm font-normal leading-5 hover:border-gray-500 placeholder:text-gray-500 ",
+					"w-full rounded border px-3 text-sm font-normal leading-5 hover:border-gray-500 placeholder:text-gray-500 ",
 					{ "border-gray-300": !isFocus && !isError && !isDisabled },
 					{
-						"!border-violet-700 shadow-none": isFocus && !isError && !isDisabled
+						"!border-violet-700": isFocus && !isError && !isDisabled
 					},
 					{
-						"!border-red-500 shadow-none focus:ring-red-500": isError
+						"!border-red-500": isError
 					},
 					{
-						"!border-gray-300 !outline-gray-300 focus:!ring-gray-300": isDisabled
+						"!border-gray-300 !outline-gray-300": isDisabled
 					},
 					className
 				)}
+				aria-invalid={isError || undefined}
 				isDisabled={isDisabled}
 				isReadonly={isReadonly}
 				value={value}
diff --git a/stories/molecules/inputs/checkbox/Checkbox.tsx b/stories/molecules/inputs/checkbox/Checkbox.tsx
index be5a60c9..4521eb2d 100644
--- a/stories/molecules/inputs/checkbox/Checkbox.tsx
+++ b/stories/molecules/inputs/checkbox/Checkbox.tsx
@@ -53,7 +53,9 @@ const Checkbox: FC<ICheckboxProps> = ({
 	if (!id) id = `cb-${uniqueID}`;
 
 	const checkboxStyles = cn(
-		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600 focus:ring-purple-600",
+		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600",
+		// @tailwindcss/forms rings checkboxes on :focus (so also on click); show the ring for keyboard focus only.
+		"focus:outline-none focus:!ring-0 focus:!ring-offset-0 focus-visible:!ring-2 focus-visible:!ring-purple-600 focus-visible:!ring-offset-2",
 		{ "border-red-500 shadow-none": isError }
 	);
 	const wrapperStyles = cn(
diff --git a/stories/molecules/inputs/combobox/ComboBox.tsx b/stories/molecules/inputs/combobox/ComboBox.tsx
index d6486eee..1c5b32c7 100644
--- a/stories/molecules/inputs/combobox/ComboBox.tsx
+++ b/stories/molecules/inputs/combobox/ComboBox.tsx
@@ -108,16 +108,19 @@ const Combobox = <T extends Record<string, unknown>>({
 			<div className="relative">
 				<div className="relative">
 					<HeadlessUICombobox.Input
-						className={`w-full rounded border border-gray-300 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm ${
-							isError ? "border-red-500" : ""
-						}`}
+						className={cn(
+							"h-9 w-full rounded border py-0 pl-3 pr-10 text-sm leading-5",
+							// Same focus treatment as InputField: a single 1px violet border, no ring.
+							"focus:outline-none focus:!ring-0",
+							isError ? "!border-red-500" : "border-gray-300 focus:!border-violet-700"
+						)}
 						onChange={(event) => setQuery(event.target.value)}
 						displayValue={(item: Record<string, unknown>) => `${item ? item[displayProperty] : ""}`}
 						placeholder={placeholder}
 					/>
 					{selectedItem && nullable && (
 						<button
-							className="absolute right-8 top-[1px] h-9 w-5 text-gray-400 hover:text-gray-500"
+							className="absolute inset-y-0 right-8 flex w-5 items-center text-gray-400 hover:text-gray-500"
 							onClick={() => setSelectedItem(undefined)}
 						>
 							<DynamicIcon icon="IconX" className="h-4 w-4 " aria-hidden="true" />
diff --git a/stories/molecules/inputs/radio/Radio.tsx b/stories/molecules/inputs/radio/Radio.tsx
index 3e1656bc..7e1723b7 100644
--- a/stories/molecules/inputs/radio/Radio.tsx
+++ b/stories/molecules/inputs/radio/Radio.tsx
@@ -43,9 +43,14 @@ const Radio: React.FC<IRadioProps> = ({
 	if (!id) id = `input-${uniqueID}`;
 	if (!name) name = id;
 
-	const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300", {
-		"border-red-500 shadow-none": isError
-	});
+	const checboxStyles = cn(
+		"h-4 w-4 text-purple-600 border-gray-300",
+		// @tailwindcss/forms rings radios on :focus (so also on click); show the ring for keyboard focus only.
+		"focus:outline-none focus:!ring-0 focus:!ring-offset-0 focus-visible:!ring-2 focus-visible:!ring-purple-500 focus-visible:!ring-offset-2",
+		{
+			"border-red-500 shadow-none": isError
+		}
+	);
 	const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled });
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const targetValue = e.currentTarget.value;
diff --git a/stories/molecules/inputs/select/Select.tsx b/stories/molecules/inputs/select/Select.tsx
index 3dfa4b32..dd60abd9 100644
--- a/stories/molecules/inputs/select/Select.tsx
+++ b/stories/molecules/inputs/select/Select.tsx
@@ -143,9 +143,11 @@ const Select: React.FC<ISelectProps> = ({
 					<ComboboxButton
 						as="div"
 						className={cn(
-							"relative w-full cursor-default overflow-hidden rounded border bg-white text-left shadow-sm",
-							"focus-within:border-primary-800 focus-within:ring-1 focus-within:ring-primary-800",
-							{ "border-red-500": isError, "border-gray-300": !isError }
+							// The border lives on this wrapper, so it carries the 36px height (matching Button's h-9)
+							// and the focus style: a single 1px border, the same violet-700 as InputField.
+							"relative h-9 w-full cursor-default overflow-hidden rounded border bg-white text-left shadow-sm",
+							"focus-within:ring-0",
+							{ "border-red-500": isError, "border-gray-300 focus-within:border-violet-700": !isError }
 						)}
 					>
 						{({ open }) => (
@@ -160,9 +162,9 @@ const Select: React.FC<ISelectProps> = ({
 									onFocus={onFocus}
 									onBlur={onBlur}
 									className={cn(
-										"w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-700",
+										"h-full w-full border-none py-0 pl-3 pr-10 text-sm leading-5 text-gray-700",
 										"placeholder:text-gray-400",
-										"focus:outline-none focus:ring-0",
+										"focus:outline-none focus:!ring-0",
 										"bg-transparent cursor-default"
 									)}
 								/>
diff --git a/stories/molecules/inputs/tests/FormControlConsistency.test.tsx b/stories/molecules/inputs/tests/FormControlConsistency.test.tsx
new file mode 100644
index 00000000..af434091
--- /dev/null
+++ b/stories/molecules/inputs/tests/FormControlConsistency.test.tsx
@@ -0,0 +1,248 @@
+import React from "react";
+import { vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Button from "@/stories/atoms/buttons/Button";
+import Capsule from "@/stories/atoms/buttons/Capsule";
+import InputField from "@/stories/molecules/inputs/InputField";
+import TextInput from "@/stories/molecules/inputs/TextInput";
+import NestedInputButton from "@/stories/molecules/inputs/NestedInputButton";
+import Combobox from "@/stories/molecules/inputs/combobox/ComboBox";
+import Select from "@/stories/molecules/inputs/select/Select";
+import Checkbox from "@/stories/molecules/inputs/checkbox/Checkbox";
+import Radio from "@/stories/molecules/inputs/radio/Radio";
+import ToggleSwitch from "@/stories/molecules/inputs/toggleSwitch/ToggleSwitch";
+import FormInputWithAddons from "@/stories/organisms/FormInputWithAddons";
+import AnimatedFormInputWithAddons from "@/stories/organisms/AnimatedFormInputWithAddons";
+import AnimatedLabelInput from "@/stories/organisms/AnimatedLabelInput";
+import TextInputSelect from "@/stories/organisms/TextInputSelect/TextInputSelect";
+import ButtonDropdown from "@/stories/organisms/ButtonDropdown";
+import DropdownWithMultiSelect from "@/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect";
+
+/**
+ * Cross-component guard for the form-control consistency rules:
+ *  - every single-line input-like control is a fixed 36px (h-9), matching the default Button;
+ *  - text-like inputs and select triggers focus with a single 1px violet-700 border and no ring;
+ *  - buttons and other non-text controls show their focus ring for keyboard focus (focus-visible) only.
+ */
+
+const noop = vi.fn();
+const selectOptions = [
+	{ label: "One", value: "1" },
+	{ label: "Two", value: "2" }
+];
+
+/** A ring (or ring offset) with a width, applied on mouse focus, press or focus-within. */
+const NON_KEYBOARD_RING = /^(focus|focus-within|active):!?ring-(offset-)?([1-9]|\[)/;
+
+const classesOf = (container: HTMLElement) =>
+	Array.from(container.querySelectorAll<HTMLElement>("[class]")).flatMap((el) =>
+		(el.getAttribute("class") ?? "").split(/\s+/).filter(Boolean)
+	);
+
+beforeAll(() => {
+	class ResizeObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	}
+	vi.stubGlobal("ResizeObserver", ResizeObserver);
+});
+
+describe("single-line controls are 36px (h-9)", () => {
+	it("InputField and TextInput (including date inputs)", () => {
+		render(
+			<>
+				<InputField type="text" value="" handleChange={noop} placeholder="field" />
+				<TextInput type="text" value="" handleChange={noop} placeholder="text" />
+				<TextInput type="date" value="" handleChange={noop} id="date" label="Date" />
+			</>
+		);
+		expect(screen.getByPlaceholderText("field")).toHaveClass("h-9", "py-0");
+		expect(screen.getByPlaceholderText("text")).toHaveClass("h-9", "py-0");
+		expect(screen.getByPlaceholderText("text")).not.toHaveClass("py-2");
+		expect(document.getElementById("date")).toHaveClass("h-9");
+	});
+
+	it("FormInputWithAddons, its nested button, and the animated-label inputs", () => {
+		render(
+			<>
+				<FormInputWithAddons
+					id="addons"
+					type="text"
+					value=""
+					handleChange={noop}
+					addonBTN={{ align: "right", ctaLabel: "Edit", onClick: noop }}
+				/>
+				<AnimatedFormInputWithAddons
+					id="animated-addons"
+					type="text"
+					value=""
+					handleChange={noop}
+					label={{ display: "Animated addons" }}
+					addonBTN={{ align: "right", ctaLabel: "Add", onClick: noop }}
+				/>
+				<AnimatedLabelInput id="animated" type="text" value="" handleChange={noop} label={{ display: "Animated" }} />
+			</>
+		);
+		expect(document.getElementById("addons")).toHaveClass("h-9");
+		expect(document.getElementById("animated-addons")).toHaveClass("h-9");
+		expect(document.getElementById("animated")).toHaveClass("h-9");
+		expect(screen.getByRole("button", { name: "Edit" })).toHaveClass("h-9", "py-0");
+		expect(screen.getByRole("button", { name: "Add" })).toHaveClass("h-9", "py-0");
+	});
+
+	it("TextInputSelect's input and native select", () => {
+		render(<TextInputSelect type="text" id="tis" value="" inputOptions={selectOptions} />);
+		expect(document.getElementById("tis")).toHaveClass("h-9");
+		expect(document.getElementById("tis")).not.toHaveClass("py-2");
+		expect(screen.getByRole("combobox")).toHaveClass("h-9", "py-0");
+	});
+
+	it("Select: the bordered wrapper is h-9 and the input fills it", () => {
+		render(<Select id="sel" options={selectOptions} />);
+		const input = screen.getByRole("combobox");
+		expect(input).toHaveClass("h-full", "py-0");
+		expect(input.parentElement).toHaveClass("h-9", "border");
+	});
+
+	it("Combobox", () => {
+		render(<Combobox id="cb" items={[{ id: "1", name: "One" }]} keyProperty="id" displayProperty="name" />);
+		expect(screen.getByRole("combobox")).toHaveClass("h-9", "py-0");
+	});
+
+	it("DropdownWithMultiSelect trigger", () => {
+		render(<DropdownWithMultiSelect label="Filters" options={[{ key: "a", label: "A", isSelected: false }]} />);
+		expect(screen.getByRole("button", { name: /Filters/ })).toHaveClass("h-9", "py-0");
+	});
+});
+
+describe("text-like inputs and select triggers focus with a single 1px violet border", () => {
+	it.each([
+		["InputField", () => <InputField type="text" value="" handleChange={noop} />],
+		["TextInput", () => <TextInput type="text" value="" handleChange={noop} />],
+		["Combobox", () => <Combobox id="cb" items={[]} keyProperty="id" displayProperty="name" />],
+		["TextInputSelect", () => <TextInputSelect type="text" value="" />]
+	])("%s input: violet border, ring forced to 0", (_, renderControl) => {
+		const { container } = render(renderControl());
+		const input = container.querySelector("input");
+		expect(input).toHaveClass("focus:!ring-0", "focus:outline-none", "focus:!border-violet-700");
+	});
+
+	it("TextInputSelect's native select: violet border, ring forced to 0", () => {
+		render(<TextInputSelect type="text" value="" inputOptions={selectOptions} />);
+		expect(screen.getByRole("combobox")).toHaveClass("focus:!ring-0", "focus:outline-none", "focus:!border-violet-700");
+	});
+
+	it("Select wrapper: focus-within violet border, no ring", () => {
+		render(<Select id="sel" options={selectOptions} />);
+		const input = screen.getByRole("combobox");
+		expect(input).toHaveClass("focus:!ring-0");
+		expect(input.parentElement).toHaveClass("focus-within:border-violet-700", "focus-within:ring-0");
+		expect(input.parentElement).not.toHaveClass("focus-within:ring-1");
+	});
+
+	it.each([
+		["TextInput", () => <TextInput type="text" value="" handleChange={noop} isError />],
+		["Combobox", () => <Combobox id="cb" items={[]} keyProperty="id" displayProperty="name" isError />],
+		["TextInputSelect", () => <TextInputSelect type="text" value="" isError />]
+	])("%s in error keeps its red border on focus", (_, renderControl) => {
+		const { container } = render(renderControl());
+		const input = container.querySelector("input");
+		expect(input).not.toHaveClass("focus:!border-violet-700");
+	});
+
+	it("TextInput in error marks the input aria-invalid", () => {
+		render(<TextInput type="text" value="" handleChange={noop} isError />);
+		expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+	});
+
+	it("Select in error keeps its red border on focus", () => {
+		render(<Select id="sel" options={selectOptions} isError />);
+		const wrapper = screen.getByRole("combobox").parentElement;
+		expect(wrapper).toHaveClass("border-red-500");
+		expect(wrapper).not.toHaveClass("focus-within:border-violet-700");
+	});
+
+	it("NestedInputButton and the multi-select trigger use the violet border for keyboard focus", () => {
+		render(
+			<>
+				<NestedInputButton align="right" ctaLabel="Edit" />
+				<DropdownWithMultiSelect label="Filters" options={[]} />
+			</>
+		);
+		expect(screen.getByRole("button", { name: "Edit" })).toHaveClass("focus-visible:!border-violet-700");
+		expect(screen.getByRole("button", { name: /Filters/ })).toHaveClass("focus-visible:border-violet-700");
+	});
+});
+
+describe("buttons and toggles ring on keyboard focus only", () => {
+	it.each(["primary", "secondary", "alternative", "danger", "danger-secondary", "warning"] as const)(
+		"Button (%s) keeps a focus-visible ring and no mouse-focus ring",
+		(actionType) => {
+			render(<Button label="Save" actionType={actionType} />);
+			const button = screen.getByRole("button");
+			expect(button).toHaveClass("focus-visible:ring-2", "focus-visible:ring-purple-600", "focus-visible:ring-offset-2");
+			expect(button.className.split(/\s+/).filter((c) => NON_KEYBOARD_RING.test(c))).toEqual([]);
+		}
+	);
+
+	it.each(["primary", "danger", "warning"] as const)("Button asLink (%s) has no mouse-focus ring", (actionType) => {
+		render(<Button label="Go" actionType={actionType} asLink={{ href: "#", target: "_self" }} />);
+		const link = screen.getByRole("link");
+		expect(link).toHaveClass("focus-visible:ring-2");
+		expect(link.className.split(/\s+/).filter((c) => NON_KEYBOARD_RING.test(c))).toEqual([]);
+		expect(link.className).not.toContain("<");
+	});
+
+	it("ButtonDropdown: both halves ring on focus-visible only", () => {
+		render(
+			<ButtonDropdown
+				button={{ label: "Save", actionType: "primary" }}
+				dropDown={{ id: "more", label: "More", items: [[{ key: "a", label: "A", onClick: noop }]] }}
+			/>
+		);
+		const [main, trigger] = screen.getAllByRole("button");
+		for (const half of [main, trigger]) {
+			expect(half).toHaveClass("focus-visible:ring-2", "focus-visible:ring-purple-600");
+			expect(half.className.split(/\s+/).filter((c) => NON_KEYBOARD_RING.test(c))).toEqual([]);
+		}
+	});
+
+	it("Checkbox and Radio zero the forms ring on :focus and ring on focus-visible", () => {
+		render(
+			<>
+				<Checkbox label="Check" />
+				<Radio label="Pick" />
+			</>
+		);
+		for (const control of [screen.getByRole("checkbox"), screen.getByRole("radio")]) {
+			expect(control).toHaveClass("focus:!ring-0", "focus:!ring-offset-0", "focus-visible:!ring-2");
+		}
+	});
+});
+
+it("no form control applies a ring width on mouse focus, press or focus-within", () => {
+	const { container } = render(
+		<>
+			<Button label="Save" />
+			<Capsule label="Capsule" actionType="primary" />
+			<InputField type="text" value="" handleChange={noop} isError />
+			<TextInput type="text" value="" handleChange={noop} isError />
+			<TextInput type="text" value="" handleChange={noop} isDisabled />
+			<NestedInputButton align="left" ctaLabel="Edit" isClear />
+			<Combobox id="cb" items={[]} keyProperty="id" displayProperty="name" />
+			<Select options={selectOptions} />
+			<Checkbox label="Check" />
+			<Radio label="Pick" />
+			<ToggleSwitch id="t" name="t" isChecked={false} onChange={noop} />
+			<FormInputWithAddons id="f" type="text" value="" handleChange={noop} />
+			<TextInputSelect type="text" value="" inputOptions={selectOptions} selectLocation="left" />
+			<ButtonDropdown
+				button={{ label: "Save", actionType: "secondary" }}
+				dropDown={{ id: "more", label: "More", items: [[{ key: "a", label: "A", onClick: noop }]] }}
+			/>
+			<DropdownWithMultiSelect label="Filters" options={[]} />
+		</>
+	);
+	expect(classesOf(container).filter((c) => NON_KEYBOARD_RING.test(c))).toEqual([]);
+});
diff --git a/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx b/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
index 450b9d50..52bab708 100644
--- a/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
+++ b/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
@@ -53,7 +53,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
 				className={cn(
 					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
 					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
-					"relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
+					"relative inline-flex items-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2"
 				)}
 				disabled={disabled}
 			>
diff --git a/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.tsx b/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.tsx
index b386c83a..5d90b0be 100644
--- a/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.tsx
+++ b/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.tsx
@@ -65,7 +65,7 @@ const AnimatedFormInputWithAddons: React.FC<IAnimatedFormInputWithAddons> = (pro
 				<div
 					className={cn(
 						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
-						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[8px]",
 						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
 						"group-focus-within:!-top-[8px] group-focus-within:!bg-label-gradient-focus group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
 
diff --git a/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx b/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
index 5cedbdd8..39bb83b8 100644
--- a/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
+++ b/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
@@ -56,7 +56,7 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 				<div
 					className={cn(
 						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
-						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[8px]",
 						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
 						"group-focus-within:!-top-[8px] group-focus-within:!bg-label-gradient-focus group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
 
diff --git a/stories/organisms/ButtonDropdown/ButtonDropdown.tsx b/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
index 3b246b6e..e7864c48 100644
--- a/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
+++ b/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
@@ -50,7 +50,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 							"grow min-w-0 !rounded-r-none !border-r-0 hover:!border-r-0",
 							// While focused, lift the button above the divider/trigger so the right
 							// side of its ring isn't painted under them.
-							"relative focus:z-10 focus-visible:z-10 focus-within:z-10 active:z-10",
+							"relative focus-visible:z-10",
 							"border-r-transparent"
 						),
 						button.className
@@ -96,7 +96,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 						// beats the outline-purple-500 in the Dropdown's defaultClassNames (plain cn, no twMerge).
 						// relative keeps it in the same paint phase as the (relative) button, so its ring's
 						// left edge isn't painted under the button; z-10 on focus lifts it fully on top.
-						"!outline-none !ring-offset-white focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 relative focus:z-10 focus-visible:z-10",
+						"!outline-none !ring-offset-white focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 relative focus-visible:z-10",
 						button.actionType === "primary"
 							? cn(
 									"border-violet-700 bg-violet-800  !text-white  hover:border-violet-700 hover:bg-violet-700 active:!border-violet-800 active:bg-violet-800 fill-white",
diff --git a/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx b/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx
index 1c42a371..8b953908 100644
--- a/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx
+++ b/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx
@@ -18,7 +18,7 @@ interface Props {
 const DropdownWithMultiSelect = ({ label, options }: Props) => {
 	return (
 		<Popover className="group">
-			<PopoverButton className="flex justify-between gap-4 text-sm py-2 px-4 rounded-[3px] border border-gray-300 bg-white">
+			<PopoverButton className="flex h-9 items-center justify-between gap-4 text-sm leading-5 py-0 px-4 rounded-[3px] border border-gray-300 bg-white focus:outline-none focus-visible:border-violet-700">
 				{label}
 				<DynamicIcon
 					icon="IconChevronDown"
diff --git a/stories/organisms/TextInputSelect/InputSelect.tsx b/stories/organisms/TextInputSelect/InputSelect.tsx
index 763dfb9e..8f76186a 100644
--- a/stories/organisms/TextInputSelect/InputSelect.tsx
+++ b/stories/organisms/TextInputSelect/InputSelect.tsx
@@ -13,6 +13,7 @@ export interface InputSelectProps {
 	onSelectOption?(value: string): void
 	className?: string
 	isDisabled?: boolean
+	isError?: boolean
 }
 
 /** Comment */
@@ -21,7 +22,8 @@ export const InputSelect: FC<InputSelectProps> = ({
 	onSelectOption,
 	align = "right",
 	className,
-	isDisabled
+	isDisabled,
+	isError
 }: InputSelectProps): JSX.Element | null => {
 	const [selectedOption, setSelectedOption] = useState<string>(inputOptions[0].value)
 
@@ -35,8 +37,11 @@ export const InputSelect: FC<InputSelectProps> = ({
 	return (
 		<select
 			className={cn(
-				"relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm ",
-				"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+				// h-9 matches InputField so the input and select form one flush 36px row.
+				"relative z-10 inline-flex h-9 items-center space-x-2 border border-gray-300 bg-white px-4 py-0 pr-7 text-sm leading-5",
+				// Same focus treatment as InputField: a single 1px violet border, no ring.
+				"focus:outline-none focus:!ring-0",
+				isError ? "border-red-500" : "focus:!border-violet-700",
 				align === "right"
 					? "-ml-px rounded-r border-l-white text-gray-700"
 					: align === "left"
diff --git a/stories/organisms/TextInputSelect/TextInputSelect.tsx b/stories/organisms/TextInputSelect/TextInputSelect.tsx
index 538649f9..c3a1af50 100644
--- a/stories/organisms/TextInputSelect/TextInputSelect.tsx
+++ b/stories/organisms/TextInputSelect/TextInputSelect.tsx
@@ -132,7 +132,7 @@ const TextInputSelect: FC<ITextInputSelectProps> = ({
 						inputOptions={inputOptions}
 						align="left"
 						onSelectOption={onSelectOption}
-						className={cn(isError ? "border-red-500" : "")}
+						isError={isError}
 						isDisabled={isDisabled}
 					/>
 				)}
@@ -151,12 +151,12 @@ const TextInputSelect: FC<ITextInputSelectProps> = ({
 						name={name}
 						id={id}
 						className={cn(
-							"w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5",
-							"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm",
+							"w-full border border-gray-300 px-3 text-sm font-normal leading-5",
 							selectLocation === "right" ? `rounded-l` : `rounded-r`,
-							isError ? "border-red-500" : "",
+							isError ? "!border-red-500" : "",
 							prefix ? `pl-7` : ""
 						)}
+						aria-invalid={isError || undefined}
 						isDisabled={isDisabled}
 						defaultValue={defaultValue}
 						value={value}
@@ -170,7 +170,8 @@ const TextInputSelect: FC<ITextInputSelectProps> = ({
 						align={"right"}
 						onSelectOption={onSelectOption}
 						isDisabled={isDisabled}
-						className={cn(selectInputClassName, isError ? "border-red-500" : "")}
+						isError={isError}
+						className={selectInputClassName}
 					/>
 				)}
 			</div>