Update radio button with input suggestions

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>
 	);