From 1e8e0d3138089fe4c0ff6810ca8abd03589a1729 Mon Sep 17 00:00:00 2001
From: Matthew Ellison <m_ellison@ymail.com>
Date: Thu, 12 Feb 2026 20:59:24 -0500
Subject: [PATCH] Update radio button with input suggestions

---
 .../input/checkbox/MattrixwvCheckbox.tsx      | 11 ++---
 lib/component/input/radio/RadioButton.tsx     | 20 +++++++--
 lib/types/InputTypes.ts                       |  2 +-
 src/util/InputUtils.tsx                       | 44 +++++++++----------
 4 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/lib/component/input/checkbox/MattrixwvCheckbox.tsx b/lib/component/input/checkbox/MattrixwvCheckbox.tsx
index 317b6ae..22899a6 100644
--- a/lib/component/input/checkbox/MattrixwvCheckbox.tsx
+++ b/lib/component/input/checkbox/MattrixwvCheckbox.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 
 
 const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
-	id,
+	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
 	name,
@@ -17,7 +17,6 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	strokeWidth = 2,
 	value,
 	disabled,
-	ariaLabel,
 	children
 }, ref ) => {
 	return (
@@ -26,6 +25,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				"group",
 				"flex flex-row items-center justify-start gap-x-2",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 				{
 					"cursor-pointer": !disabled,
 					"cursor-not-allowed": disabled
@@ -37,7 +37,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			onChange={onChange}
 			value={value}
 			disabled={disabled}
-			aria-label={ariaLabel}
+			aria-labelledby={`${id}Label`}
 			ref={ref}
 		>
 			{/* Checkbox */}
@@ -73,11 +73,12 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			{/* Label */}
 			{
 				children &&
-				<div
+				<span
+					id={`${id}Label`}
 					className={labelClassName}
 				>
 					{children}
-				</div>
+				</span>
 			}
 		</Checkbox>
 	);
diff --git a/lib/component/input/radio/RadioButton.tsx b/lib/component/input/radio/RadioButton.tsx
index 605382e..583835f 100644
--- a/lib/component/input/radio/RadioButton.tsx
+++ b/lib/component/input/radio/RadioButton.tsx
@@ -5,18 +5,29 @@ import { forwardRef } from "react";
 
 
 const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
-	id,
+	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
 	size = "sm",
 	value,
+	disabled,
 	children
 }, ref ) => {
 	return (
 		<Radio
 			id={id}
 			value={value}
-			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+			className={clsx(
+				"group",
+				"flex flex-row items-center justify-center gap-x-2",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+				{
+					"cursor-pointer": !disabled,
+					"cursor-not-allowed": disabled
+				}
+			)}
+			disabled={disabled}
+			aria-labelledby={`${id}Label`}
 			ref={ref}
 		>
 			<div
@@ -35,11 +46,12 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 			/>
 			{
 				children &&
-				<div
+				<span
+					id={`${id}Label`}
 					className={labelClassName}
 				>
 					{children}
-				</div>
+				</span>
 			}
 		</Radio>
 	);
diff --git a/lib/types/InputTypes.ts b/lib/types/InputTypes.ts
index a395eb0..cc41190 100644
--- a/lib/types/InputTypes.ts
+++ b/lib/types/InputTypes.ts
@@ -137,7 +137,6 @@ export interface CheckboxProps {
 	strokeWidth?: number;
 	value?: string;
 	disabled?: boolean;
-	ariaLabel: string;
 	children?: React.ReactNode;
 }
 
@@ -149,6 +148,7 @@ export interface RadioButtonProps {
 	labelClassName?: string;
 	size?: RadioButtonSize;
 	value: string;
+	disabled?: boolean;
 	children?: React.ReactNode;
 }
 
diff --git a/src/util/InputUtils.tsx b/src/util/InputUtils.tsx
index f3676a7..f50d951 100644
--- a/src/util/InputUtils.tsx
+++ b/src/util/InputUtils.tsx
@@ -687,32 +687,32 @@ export function CheckboxContent(){
 		>
 			<CheckboxDisplay title="Checkbox">
 				<div className="flex flex-row items-center justify-center gap-x-8">
-					<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true} ariaLabel="Default Checkbox">Default</MattrixwvCheckbox>
-					<PrimaryCheckbox defaultChecked={true} ariaLabel="Primary Checkbox">Primary</PrimaryCheckbox>
-					<SecondaryCheckbox defaultChecked={true} ariaLabel="Secondary Checkbox">Secondary</SecondaryCheckbox>
-					<TertiaryCheckbox defaultChecked={true} ariaLabel="Tertiary Checkbox">Tertiary</TertiaryCheckbox>
-					<InfoCheckbox defaultChecked={true} ariaLabel="Info Checkbox">Info</InfoCheckbox>
-					<SuccessCheckbox defaultChecked={true} ariaLabel="Success Checkbox">Success</SuccessCheckbox>
-					<WarningCheckbox defaultChecked={true} ariaLabel="Warning Checkbox">Warning</WarningCheckbox>
-					<DangerCheckbox defaultChecked={true} ariaLabel="Danger Checkbox">Danger</DangerCheckbox>
-					<MoltenCheckbox defaultChecked={true} ariaLabel="Molten Checkbox">Molten</MoltenCheckbox>
-					<LightCheckbox defaultChecked={true} ariaLabel="Light Checkbox">Light</LightCheckbox>
-					<DarkCheckbox defaultChecked={true} ariaLabel="Dark Checkbox">Dark</DarkCheckbox>
+					<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
+					<PrimaryCheckbox defaultChecked={true} >Primary</PrimaryCheckbox>
+					<SecondaryCheckbox defaultChecked={true}>Secondary</SecondaryCheckbox>
+					<TertiaryCheckbox defaultChecked={true}>Tertiary</TertiaryCheckbox>
+					<InfoCheckbox defaultChecked={true}>Info</InfoCheckbox>
+					<SuccessCheckbox defaultChecked={true}>Success</SuccessCheckbox>
+					<WarningCheckbox defaultChecked={true}>Warning</WarningCheckbox>
+					<DangerCheckbox defaultChecked={true}>Danger</DangerCheckbox>
+					<MoltenCheckbox defaultChecked={true}>Molten</MoltenCheckbox>
+					<LightCheckbox defaultChecked={true}>Light</LightCheckbox>
+					<DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
 				</div>
 			</CheckboxDisplay>
 			<CheckboxDisplay title="Checks">
 				<div className="flex flex-row items-center justify-center gap-x-8">
-					<MattrixwvCheckbox className="group-data-checked:stroke-amber-400 not-group-data-checked:stroke-white" defaultChecked={true} showBox={false} ariaLabel="Default Checkbox">Default</MattrixwvCheckbox>
-					<PrimaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Primary Checkbox">Primary</PrimaryCheckbox>
-					<SecondaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Secondary Checkbox">Secondary</SecondaryCheckbox>
-					<TertiaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Tertiary Checkbox">Tertiary</TertiaryCheckbox>
-					<InfoCheckbox defaultChecked={true} showBox={false} ariaLabel="Info Checkbox">Info</InfoCheckbox>
-					<SuccessCheckbox defaultChecked={true} showBox={false} ariaLabel="Success Checkbox">Success</SuccessCheckbox>
-					<WarningCheckbox defaultChecked={true} showBox={false} ariaLabel="Warning Checkbox">Warning</WarningCheckbox>
-					<DangerCheckbox defaultChecked={true} showBox={false} ariaLabel="Danger Checkbox">Danger</DangerCheckbox>
-					<MoltenCheckbox defaultChecked={true} showBox={false} ariaLabel="Molten Checkbox">Molten</MoltenCheckbox>
-					<LightCheckbox defaultChecked={true} showBox={false} ariaLabel="Light Checkbox">Light</LightCheckbox>
-					<DarkCheckbox defaultChecked={true} showBox={false} ariaLabel="Dark Checkbox">Dark</DarkCheckbox>
+					<MattrixwvCheckbox className="group-data-checked:stroke-amber-400" defaultChecked={true} showBox={false}>Default</MattrixwvCheckbox>
+					<PrimaryCheckbox defaultChecked={true} showBox={false}>Primary</PrimaryCheckbox>
+					<SecondaryCheckbox defaultChecked={true} showBox={false}>Secondary</SecondaryCheckbox>
+					<TertiaryCheckbox defaultChecked={true} showBox={false}>Tertiary</TertiaryCheckbox>
+					<InfoCheckbox defaultChecked={true} showBox={false}>Info</InfoCheckbox>
+					<SuccessCheckbox defaultChecked={true} showBox={false}>Success</SuccessCheckbox>
+					<WarningCheckbox defaultChecked={true} showBox={false}>Warning</WarningCheckbox>
+					<DangerCheckbox defaultChecked={true} showBox={false}>Danger</DangerCheckbox>
+					<MoltenCheckbox defaultChecked={true} showBox={false}>Molten</MoltenCheckbox>
+					<LightCheckbox defaultChecked={true} showBox={false}>Light</LightCheckbox>
+					<DarkCheckbox defaultChecked={true} showBox={false}>Dark</DarkCheckbox>
 				</div>
 			</CheckboxDisplay>
 		</div>