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>