Radio Button and Checkbox Created

lib/component/input/checkbox/DangerCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function DangerCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-red-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-red-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/DarkCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function DarkCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-black group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-black": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/InfoCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function InfoCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-cyan-500 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-cyan-500": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/LightCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function LightCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-white group-data-checked:stroke-black": box,
+					"group-data-checked:stroke-white": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -0,0 +1,71 @@
+import type { CheckboxProps } from "$/types/Input";
+import { Checkbox } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function MattrixwvCheckbox({
+	id,
+	className,
+	labelClassName,
+	name,
+	size = "sm",
+	box = true,
+	onChange,
+	checked,
+	defaultChecked,
+	strokeWidth = 2,
+	value,
+	children
+}: CheckboxProps){
+	return (
+		<Checkbox
+			id={id}
+			className={clsx(
+				"group cursor-pointer",
+				"flex flex-row items-center justify-center gap-x-2"
+			)}
+			name={name}
+			checked={checked}
+			defaultChecked={defaultChecked}
+			onChange={onChange}
+			value={value}
+		>
+			<div
+				className={clsx(
+					className,
+					{
+						"rounded border": box
+					},
+					{
+						"": size === "none",
+						"size-3": size === "xs",
+						"size-4": size === "sm",
+						"size-5": size === "md",
+						"size-6": size === "lg",
+						"size-7": size === "xl"
+					}
+				)}
+			>
+				<svg
+					viewBox="0 0 14 14"
+					fill="none"
+				>
+					<path
+						d="M3 8L6 11L11 3.5"
+						strokeWidth={strokeWidth}
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</svg>
+			</div>
+			{
+				children &&
+				<div
+					className={labelClassName}
+				>
+					{children}
+				</div>
+			}
+		</Checkbox>
+	);
+}

lib/component/input/checkbox/MoltenCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function MoltenCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-orange-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-orange-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/PrimaryCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function PrimaryCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-blue-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-blue-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/SecondaryCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function SecondaryCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-neutral-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-neutral-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/SuccessCheckbox.tsx

@@ -0,0 +1,25 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function SuccessCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-green-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-green-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}
+

lib/component/input/checkbox/TertiaryCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function TertiaryCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-purple-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-purple-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/WarningCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function WarningCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-yellow-500 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-yellow-500": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/file/DragAndDropFileInput.tsx

@@ -1,20 +1,84 @@
-import { useRef } from "react";
+import type { FileInputProps } from "$/types/Input";
+import { humanReadableBytes } from "$/util/FileUtil";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
 
 
-export default function DragAndDropFileInput(){
+export default function DragAndDropFileInput({
+	id,
+	className,
+	name,
+	minSize,
+	maxSize,
+	showFileName,
+	showSize,
+	onChange,
+	disabled,
+	children
+}: FileInputProps){
+	const [ file, setFile ] = useState<File>();
 	const inputRef = useRef<HTMLInputElement>(null);
 
 
+	useEffect(() => {
+		onChange?.(file);
+	}, [ file ]);
+
 	return (
-		<div
-			className="relative border-2 rounded-lg w-full h-full cursor-pointer"
+		<label
+			className={clsx(
+				"flex flex-col items-center justify-center border-2 rounded-lg w-full h-full cursor-pointer",
+				className
+			)}
+			onDragOver={(e) => e.preventDefault()}
+			onDrop={(e) => {
+				e.preventDefault();
+				setFile(e.dataTransfer.files[0]);
+				if(inputRef.current){ inputRef.current.files = e.dataTransfer.files; }
+			}}
 		>
 			<input
 				ref={inputRef}
 				type="file"
+				id={id}
 				className="sr-only"
+				name={name}
+				onChange={(e) => setFile(e.target.files?.[0])}
+				disabled={disabled}
 			/>
-			Drag And Drop File Input
-		</div>
+			<div
+				className="flex flex-col items-center justify-between w-full h-full px-2"
+			>
+				{children}
+				<div
+					className="flex flex-row items-center justify-between gap-x-8 w-full"
+				>
+					{
+						showFileName &&
+						<div
+							className="text-center"
+						>
+							{file?.name}
+						</div>
+					}
+					{
+						showSize &&
+						<div
+							className={clsx(
+								{
+									"text-red-600": minSize && file?.size && file?.size < minSize,
+									"text-red-600 ": maxSize && file?.size && file?.size > maxSize,
+									"text-green-600": minSize && !maxSize && file?.size && file?.size > minSize,
+									"text-green-600 ": !minSize && maxSize && file?.size && file?.size < maxSize,
+									" text-green-600": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
+								}
+							)}
+						>
+							{humanReadableBytes(file?.size ?? 0)}
+						</div>
+					}
+				</div>
+			</div>
+		</label>
 	);
 }

lib/component/input/file/FileInput.tsx

@@ -23,16 +23,16 @@ export default function FileInput({
 
 	return (
 		<div
-			className="flex flex-row items-center justify-between w-full border-2 rounded-lg"
+			className={clsx(
+				"flex flex-row items-center justify-between w-full border-2 rounded-lg",
+				className
+			)}
 		>
 			<input
 				ref={inputRef}
 				id={id}
 				type="file"
-				className={clsx(
-					"sr-only",
-					className
-				)}
+				className="sr-only"
 				name={name}
 				onChange={(e) => { setFile(e.target.files?.[0]); onChange?.(e.target.files?.[0]); }}
 				disabled={disabled}
@@ -76,6 +76,7 @@ export default function FileInput({
 					className="text-nowrap rounded-r-lg"
 					rounding="none"
 					onClick={() => { inputRef.current?.click(); }}
+					disabled={disabled}
 				>
 					Click Me
 				</SecondaryButton>

lib/component/input/radio/DangerRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function DangerRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-red-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/DarkRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function DarkRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-black",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/InfoRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function InfoRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-cyan-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/LightRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function LightRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-white",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/MoltenRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function MoltenRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-orange-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/PrimaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function PrimaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-blue-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/RadioButton.tsx

@@ -0,0 +1,44 @@
+import type { RadioButtonProps } from "$/types/Input";
+import { Radio } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function RadioButton({
+	id,
+	className,
+	labelClassName,
+	size = "sm",
+	value,
+	children
+}: RadioButtonProps){
+	return (
+		<Radio
+			id={id}
+			value={value}
+			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+		>
+			<div
+				className={clsx(
+					"rounded-full not-group-data-checked:border",
+					className,
+					{
+						"": size === "none",
+						"size-3": size === "xs",
+						"size-4": size === "sm",
+						"size-5": size === "md",
+						"size-6": size === "lg",
+						"size-7": size === "xl"
+					}
+				)}
+			/>
+			{
+				children &&
+				<div
+					className={labelClassName}
+				>
+					{children}
+				</div>
+			}
+		</Radio>
+	);
+}

lib/component/input/radio/RadioList.tsx

@@ -0,0 +1,35 @@
+import type { RadioListProps } from "$/types/Input";
+import { RadioGroup } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function RadioList({
+	id,
+	className,
+	name,
+	value,
+	onChange,
+	defaultValue,
+	direction = "horizontal",
+	children
+}: RadioListProps){
+	return (
+		<RadioGroup
+			id={id}
+			className={clsx(
+				"flex items-center justify-center",
+				className,
+				{
+					"flex-row gap-x-8": direction === "horizontal",
+					"flex-col gap-y-2": direction === "vertical"
+				}
+			)}
+			name={name}
+			value={value}
+			onChange={onChange}
+			defaultValue={defaultValue}
+		>
+			{children}
+		</RadioGroup>
+	);
+}

lib/component/input/radio/SecondaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function SecondaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-neutral-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/SuccessRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function SuccessRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-green-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/TertiaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function TertiaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-purple-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/WarningRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function WarningRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-yellow-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/types/Input.d.ts

@@ -105,9 +105,47 @@ export interface FileInputProps {
 	maxSize?: number;
 	showFileName?: boolean;
 	showSize?: boolean;
-	defaultValue?: File;
-	value?: File;
 	onChange?: (newFile: File | undefined) => void;
 	disabled?: boolean;
 	children?: React.ReactNode;
 }
+
+
+export type CheckboxSize = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface CheckboxProps {
+	id?: string;
+	className?: string;
+	labelClassName?: string;
+	name?: string;
+	size?: CheckboxSize;
+	box?: boolean;
+	onChange?: (newChecked: boolean) => void;
+	checked?: boolean;
+	defaultChecked?: boolean;
+	strokeWidth?: number;
+	value?: string;
+	children?: React.ReactNode;
+}
+
+export type RadioButtonSize = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface RadioButtonProps {
+	id?: string;
+	className?: string;
+	labelClassName?: string;
+	size?: RadioButtonSize;
+	value: string;
+	children?: React.ReactNode;
+}
+
+export interface RadioListProps {
+	id?: string;
+	className?: string;
+	name?: string;
+	value?: string;
+	onChange?: (value: string) => void;
+	defaultValue?: string;
+	direction?: "vertical" | "horizontal";
+	children?: React.ReactNode;
+}

src/routes/__root.tsx

@@ -27,6 +27,7 @@ export const Route = createRootRoute({
 					{
 						navLinks.map((link) => (
 							<Link
+								key={link.to}
 								to={link.to}
 							>
 								{link.label}

src/routes/input/index.tsx

@@ -1,6 +1,6 @@
 import { MattrixwvTabGroup } from "$/component/tab";
 import type { TabGroupContent } from "$/types/Tab";
-import { FileContent, SwitchContent, TextContent } from "@/util/InputUtils";
+import { CheckboxContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils";
 import { createFileRoute } from "@tanstack/react-router";
 
 
@@ -11,9 +11,11 @@ export const Route = createFileRoute('/input/')({
 
 function InputPage(){
 	const tabs: TabGroupContent[] = [
-		{ tab: "Input", content: <FileContent/> },
-		{ tab: "Text", content: <TextContent/> },
-		{ tab: "Switch", content: <SwitchContent/> }
+		{ tab: "Checkbox", content: <CheckboxContent/>},
+		{ tab: "Radio", content: <RadioContent/> },
+		{ tab: "File", content: <FileContent/> },
+		{ tab: "Switch", content: <SwitchContent/> },
+		{ tab: "Text", content: <TextContent/> }
 	];
 
 	return (

src/util/InputUtils.tsx

@@ -1,5 +1,28 @@
 import { Button } from "$/component/button";
 import { DragAndDropFileInput, FileInput, NumberInput, OptionInput, SelectInput, TextInput } from "$/component/input";
+import DangerCheckbox from "$/component/input/checkbox/DangerCheckbox";
+import DarkCheckbox from "$/component/input/checkbox/DarkCheckbox";
+import InfoCheckbox from "$/component/input/checkbox/InfoCheckbox";
+import LightCheckbox from "$/component/input/checkbox/LightCheckbox";
+import MattrixwvCheckbox from "$/component/input/checkbox/MattrixwvCheckbox";
+import MoltenCheckbox from "$/component/input/checkbox/MoltenCheckbox";
+import PrimaryCheckbox from "$/component/input/checkbox/PrimaryCheckbox";
+import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
+import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox";
+import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox";
+import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
+import DangerRadioButton from "$/component/input/radio/DangerRadioButton";
+import DarkRadioButton from "$/component/input/radio/DarkRadioButton";
+import InfoRadioButton from "$/component/input/radio/InfoRadioButton";
+import LightRadioButton from "$/component/input/radio/LightRadioButton";
+import MoltenRadioButton from "$/component/input/radio/MoltenRadioButton";
+import PrimaryRadioButton from "$/component/input/radio/PrimaryRadioButton";
+import RadioButton from "$/component/input/radio/RadioButton";
+import RadioList from "$/component/input/radio/RadioList";
+import SecondaryRadioButton from "$/component/input/radio/SecondaryRadioButton";
+import SuccessRadioButton from "$/component/input/radio/SuccessRadioButton";
+import TertiaryRadioButton from "$/component/input/radio/TertiaryRadioButton";
+import WarningRadioButton from "$/component/input/radio/WarningRadioButton";
 import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
 import DangerSwitch from "$/component/input/switch/DangerSwitch";
 import DarkSwitch from "$/component/input/switch/DarkSwitch";
@@ -36,6 +59,7 @@ export function SwitchContent(): React.ReactNode{
 								className="bg-gray-400 data-checked:bg-blue-600"
 								knobClassName="bg-white"
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</MattrixwvSwitch>
@@ -57,6 +81,7 @@ export function SwitchContent(): React.ReactNode{
 								wide={true}
 								offText={<span className="text-black">Off</span>}
 								onText="On"
+								defaultChecked={true}
 							>
 								{size} Switch
 							</MattrixwvSwitch>
@@ -73,6 +98,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<PrimarySwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</PrimarySwitch>
@@ -110,6 +136,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<SecondarySwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</SecondarySwitch>
@@ -147,6 +174,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<TertiarySwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</TertiarySwitch>
@@ -184,6 +212,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<SuccessSwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</SuccessSwitch>
@@ -221,6 +250,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<WarningSwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</WarningSwitch>
@@ -258,6 +288,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<DangerSwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</DangerSwitch>
@@ -295,6 +326,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<DarkSwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</DarkSwitch>
@@ -332,6 +364,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<LightSwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</LightSwitch>
@@ -369,6 +402,7 @@ export function SwitchContent(): React.ReactNode{
 						>
 							<SuccessDangerSwitch
 								size={size}
+								defaultChecked={true}
 							>
 								{size} Switch
 							</SuccessDangerSwitch>
@@ -534,7 +568,14 @@ export function FileContent(){
 				/>
 			</FileDisplay>
 			<FileDisplay title="Drag and Drop File Input">
-				<DragAndDropFileInput/>
+				<DragAndDropFileInput
+					showFileName={true}
+					showSize={true}
+					maxSize={1024 * 1024}
+					minSize={1024}
+				>
+					Drag And Drop File Input
+				</DragAndDropFileInput>
 			</FileDisplay>
 		</div>
 	);
@@ -556,3 +597,149 @@ function FileDisplay({
 		</div>
 	);
 }
+
+export function CheckboxContent(){
+	return (
+		<div
+			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>
+			</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>
+			</CheckboxDisplay>
+		</div>
+	);
+}
+
+function CheckboxDisplay({
+	title,
+	children
+}:{
+	title: React.ReactNode;
+	children: React.ReactNode;
+}){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-2 w-full"
+		>
+			<h2 className="text-2xl">{title}</h2>
+			{children}
+		</div>
+	);
+}
+
+export function RadioContent(){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
+		>
+			<RadioDisplay title="Sizes">
+				<RadioList
+				>
+					<PrimaryRadioButton size="xs" value="xs">Extra Small</PrimaryRadioButton>
+					<PrimaryRadioButton size="sm" value="sm">Small</PrimaryRadioButton>
+					<PrimaryRadioButton size="md" value="md">Medium</PrimaryRadioButton>
+					<PrimaryRadioButton size="lg" value="lg">Large</PrimaryRadioButton>
+					<PrimaryRadioButton size="xl" value="xl">Extra Large</PrimaryRadioButton>
+				</RadioList>
+			</RadioDisplay>
+			<RadioDisplay title="Radio Checked">
+				<div
+					className="flex flex-row items-center justify-center gap-x-8"
+				>
+					<RadioList value="Primary"><PrimaryRadioButton value="Primary">Primary</PrimaryRadioButton></RadioList>
+					<RadioList value="Secondary"><SecondaryRadioButton value="Secondary">Secondary</SecondaryRadioButton></RadioList>
+					<RadioList value="Tertiary"><TertiaryRadioButton value="Tertiary">Tertiary</TertiaryRadioButton></RadioList>
+					<RadioList value="Info"><InfoRadioButton value="Info">Info</InfoRadioButton></RadioList>
+					<RadioList value="Success"><SuccessRadioButton value="Success">Success</SuccessRadioButton></RadioList>
+					<RadioList value="warning"><WarningRadioButton value="warning">warning</WarningRadioButton></RadioList>
+					<RadioList value="Danger"><DangerRadioButton value="Danger">Danger</DangerRadioButton></RadioList>
+					<RadioList value="Molten"><MoltenRadioButton value="Molten">Molten</MoltenRadioButton></RadioList>
+					<RadioList value="Light"><LightRadioButton value="Light">Light</LightRadioButton></RadioList>
+					<RadioList value="Dark"><DarkRadioButton value="Dark">Dark</DarkRadioButton></RadioList>
+				</div>
+			</RadioDisplay>
+			<RadioDisplay title="Radio Horizontal">
+				<RadioList
+					direction="horizontal"
+				>
+					<RadioButton value="default" className="group-data-checked:bg-amber-500">Default</RadioButton>
+					<PrimaryRadioButton value="primary">Primary</PrimaryRadioButton>
+					<SecondaryRadioButton value="secondary">Secondary</SecondaryRadioButton>
+					<TertiaryRadioButton value="tertiary">Tertiary</TertiaryRadioButton>
+					<InfoRadioButton value="info">Info</InfoRadioButton>
+					<SuccessRadioButton value="success">Success</SuccessRadioButton>
+					<WarningRadioButton value="warning">Warning</WarningRadioButton>
+					<DangerRadioButton value="danger">Danger</DangerRadioButton>
+					<MoltenRadioButton value="molten">Molten</MoltenRadioButton>
+					<LightRadioButton value="light">Light</LightRadioButton>
+					<DarkRadioButton value="dark">Dark</DarkRadioButton>
+				</RadioList>
+			</RadioDisplay>
+			<RadioDisplay title="Radio Vertical">
+				<RadioList
+					direction="vertical"
+				>
+					<RadioButton value="default" className="group-data-checked:bg-amber-500">Default</RadioButton>
+					<PrimaryRadioButton value="primary">Primary</PrimaryRadioButton>
+					<SecondaryRadioButton value="secondary">Secondary</SecondaryRadioButton>
+					<TertiaryRadioButton value="tertiary">Tertiary</TertiaryRadioButton>
+					<InfoRadioButton value="info">Info</InfoRadioButton>
+					<SuccessRadioButton value="success">Success</SuccessRadioButton>
+					<WarningRadioButton value="warning">Warning</WarningRadioButton>
+					<DangerRadioButton value="danger">Danger</DangerRadioButton>
+					<MoltenRadioButton value="molten">Molten</MoltenRadioButton>
+					<LightRadioButton value="light">Light</LightRadioButton>
+					<DarkRadioButton value="dark">Dark</DarkRadioButton>
+				</RadioList>
+			</RadioDisplay>
+		</div>
+	);
+}
+
+function RadioDisplay({
+	title,
+	children
+}:{
+	title: React.ReactNode;
+	children: React.ReactNode;
+}){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-2 w-full"
+		>
+			<h2 className="text-2xl">{title}</h2>
+			{children}
+		</div>
+	);
+}