diff --git a/lib/component/input/checkbox/DangerCheckbox.tsx b/lib/component/input/checkbox/DangerCheckbox.tsx
index 6520585..1328173 100644
--- a/lib/component/input/checkbox/DangerCheckbox.tsx
+++ b/lib/component/input/checkbox/DangerCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-danger group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-danger": !box
+					"group-data-checked:bg-danger group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-danger": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/DarkCheckbox.tsx b/lib/component/input/checkbox/DarkCheckbox.tsx
index c5384f1..fa6a5f9 100644
--- a/lib/component/input/checkbox/DarkCheckbox.tsx
+++ b/lib/component/input/checkbox/DarkCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-dark group-data-checked:stroke-light": box,
-					"group-data-checked:stroke-dark": !box
+					"group-data-checked:bg-dark group-data-checked:stroke-light": showBox,
+					"group-data-checked:stroke-dark": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/InfoCheckbox.tsx b/lib/component/input/checkbox/InfoCheckbox.tsx
index 2e0ed82..d99e103 100644
--- a/lib/component/input/checkbox/InfoCheckbox.tsx
+++ b/lib/component/input/checkbox/InfoCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-info group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-info": !box
+					"group-data-checked:bg-info group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-info": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/LightCheckbox.tsx b/lib/component/input/checkbox/LightCheckbox.tsx
index 42c4627..0652d55 100644
--- a/lib/component/input/checkbox/LightCheckbox.tsx
+++ b/lib/component/input/checkbox/LightCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-light group-data-checked:stroke-dark": box,
-					"group-data-checked:stroke-light": !box
+					"group-data-checked:bg-light group-data-checked:stroke-dark": showBox,
+					"group-data-checked:stroke-light": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/MattrixwvCheckbox.tsx b/lib/component/input/checkbox/MattrixwvCheckbox.tsx
index 88317c2..317b6ae 100644
--- a/lib/component/input/checkbox/MattrixwvCheckbox.tsx
+++ b/lib/component/input/checkbox/MattrixwvCheckbox.tsx
@@ -10,33 +10,42 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	labelClassName,
 	name,
 	size = "sm",
-	box = true,
+	showBox = true,
 	onChange,
 	checked,
 	defaultChecked,
 	strokeWidth = 2,
 	value,
+	disabled,
+	ariaLabel,
 	children
 }, ref ) => {
 	return (
 		<Checkbox
 			id={id}
 			className={clsx(
-				"group cursor-pointer",
-				"flex flex-row items-center justify-center gap-x-2"
+				"group",
+				"flex flex-row items-center justify-start gap-x-2",
+				{
+					"cursor-pointer": !disabled,
+					"cursor-not-allowed": disabled
+				}
 			)}
 			name={name}
 			checked={checked}
 			defaultChecked={defaultChecked}
 			onChange={onChange}
 			value={value}
+			disabled={disabled}
+			aria-label={ariaLabel}
 			ref={ref}
 		>
+			{/* Checkbox */}
 			<div
 				className={clsx(
 					className,
 					{
-						"rounded border": box
+						"border rounded": showBox
 					},
 					{
 						"": size === "none",
@@ -51,7 +60,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				<svg
 					viewBox="0 0 14 14"
 					fill="none"
-					aria-label="checkbox"
+					aria-hidden="true"
 				>
 					<path
 						d="M3 8L6 11L11 3.5"
@@ -61,6 +70,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 					/>
 				</svg>
 			</div>
+			{/* Label */}
 			{
 				children &&
 				<div
diff --git a/lib/component/input/checkbox/MoltenCheckbox.tsx b/lib/component/input/checkbox/MoltenCheckbox.tsx
index 5b05179..00f0c94 100644
--- a/lib/component/input/checkbox/MoltenCheckbox.tsx
+++ b/lib/component/input/checkbox/MoltenCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-molten group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-molten": !box
+					"group-data-checked:bg-molten group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-molten": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/PrimaryCheckbox.tsx b/lib/component/input/checkbox/PrimaryCheckbox.tsx
index 2ec59dd..1c954ef 100644
--- a/lib/component/input/checkbox/PrimaryCheckbox.tsx
+++ b/lib/component/input/checkbox/PrimaryCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-primary group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-primary": !box
+					"group-data-checked:bg-primary group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-primary": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/SecondaryCheckbox.tsx b/lib/component/input/checkbox/SecondaryCheckbox.tsx
index a63ab9c..b08308c 100644
--- a/lib/component/input/checkbox/SecondaryCheckbox.tsx
+++ b/lib/component/input/checkbox/SecondaryCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-secondary group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-secondary": !box
+					"group-data-checked:bg-secondary group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-secondary": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/SuccessCheckbox.tsx b/lib/component/input/checkbox/SuccessCheckbox.tsx
index e382830..8d409e4 100644
--- a/lib/component/input/checkbox/SuccessCheckbox.tsx
+++ b/lib/component/input/checkbox/SuccessCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-success group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-success": !box
+					"group-data-checked:bg-success group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-success": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/TertiaryCheckbox.tsx b/lib/component/input/checkbox/TertiaryCheckbox.tsx
index 68aa266..481e8d8 100644
--- a/lib/component/input/checkbox/TertiaryCheckbox.tsx
+++ b/lib/component/input/checkbox/TertiaryCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-tertiary group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-tertiary": !box
+					"group-data-checked:bg-tertiary group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-tertiary": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/component/input/checkbox/WarningCheckbox.tsx b/lib/component/input/checkbox/WarningCheckbox.tsx
index 2a744ab..ad3bac1 100644
--- a/lib/component/input/checkbox/WarningCheckbox.tsx
+++ b/lib/component/input/checkbox/WarningCheckbox.tsx
@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
-	box = true,
+	showBox = true,
 	...props
 }, ref) => {
 	return (
@@ -14,11 +14,11 @@ const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-warning group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-warning": !box
+					"group-data-checked:bg-warning group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-warning": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
 			ref={ref}
 		/>
diff --git a/lib/types/InputTypes.ts b/lib/types/InputTypes.ts
index 2cae599..a395eb0 100644
--- a/lib/types/InputTypes.ts
+++ b/lib/types/InputTypes.ts
@@ -130,12 +130,14 @@ export interface CheckboxProps {
 	labelClassName?: string;
 	name?: string;
 	size?: CheckboxSize;
-	box?: boolean;
+	showBox?: boolean;
 	onChange?: (newChecked: boolean) => void;
 	checked?: boolean;
 	defaultChecked?: boolean;
 	strokeWidth?: number;
 	value?: string;
+	disabled?: boolean;
+	ariaLabel: string;
 	children?: React.ReactNode;
 }
 
diff --git a/src/util/InputUtils.tsx b/src/util/InputUtils.tsx
index ee4f5db..f3676a7 100644
--- a/src/util/InputUtils.tsx
+++ b/src/util/InputUtils.tsx
@@ -530,10 +530,10 @@ export function SwitchContent(){
 function SwitchDisplay({
 	title,
 	children
-}:{
+}:Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2"
@@ -624,10 +624,10 @@ export function TextContent(){
 function TextDisplay({
 	title,
 	children
-}:{
+}:Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2 w-full"
@@ -666,10 +666,10 @@ export function FileContent(){
 function FileDisplay({
 	title,
 	children
-}:{
+}:Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2 w-full"
@@ -686,37 +686,33 @@ export function CheckboxContent(){
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
 			<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}>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 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>
 				</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} box={false}>Default</MattrixwvCheckbox>
-					<PrimaryCheckbox defaultChecked={true} box={false}>Primary</PrimaryCheckbox>
-					<SecondaryCheckbox defaultChecked={true} box={false}>Secondary</SecondaryCheckbox>
-					<TertiaryCheckbox defaultChecked={true} box={false}>Tertiary</TertiaryCheckbox>
-					<InfoCheckbox defaultChecked={true} box={false}>Info</InfoCheckbox>
-					<SuccessCheckbox defaultChecked={true} box={false}>Success</SuccessCheckbox>
-					<WarningCheckbox defaultChecked={true} box={false}>Warning</WarningCheckbox>
-					<DangerCheckbox defaultChecked={true} box={false}>Danger</DangerCheckbox>
-					<MoltenCheckbox defaultChecked={true} box={false}>Molten</MoltenCheckbox>
-					<LightCheckbox defaultChecked={true} box={false}>Light</LightCheckbox>
-					<DarkCheckbox defaultChecked={true} box={false}>Dark</DarkCheckbox>
+				<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>
 				</div>
 			</CheckboxDisplay>
 		</div>
@@ -726,10 +722,10 @@ export function CheckboxContent(){
 function CheckboxDisplay({
 	title,
 	children
-}:{
+}:Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2 w-full"
@@ -812,10 +808,10 @@ export function RadioContent(){
 function RadioDisplay({
 	title,
 	children
-}:{
+}:Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2 w-full"