diff --git a/.changeset/plenty-parks-glow.md b/.changeset/plenty-parks-glow.md
new file mode 100644
index 000000000000..7889696b5675
--- /dev/null
+++ b/.changeset/plenty-parks-glow.md
@@ -0,0 +1,10 @@
+---
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/number": minor
+"@gradio/radio": minor
+"@gradio/slider": minor
+"gradio": minor
+---
+
+feat:V4: Single-file implementation of form components
diff --git a/gradio/_simple_templates/simpledropdown.py b/gradio/_simple_templates/simpledropdown.py
index 14773dfdf98e..e9619969fec6 100644
--- a/gradio/_simple_templates/simpledropdown.py
+++ b/gradio/_simple_templates/simpledropdown.py
@@ -33,7 +33,9 @@ def __init__(
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
-        **kwargs,
+        render: bool = True,
+        root_url: str | None = None,
+        _skip_init_processing: bool = False,
     ):
         """
         Parameters:
@@ -49,6 +51,9 @@ def __init__(
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+                    render: bool = True,
+            root_url: str | None = None,
+            _skip_init_processing: bool = False,
         """
         self.choices = (
             # Although we expect choices to be a list of lists, it can be a list of tuples if the Gradio app
@@ -69,7 +74,9 @@ def __init__(
             elem_id=elem_id,
             elem_classes=elem_classes,
             value=value,
-            **kwargs,
+            render=render,
+            root_url=root_url,
+            _skip_init_processing=_skip_init_processing,
         )
 
     def api_info(self) -> dict[str, Any]:
diff --git a/gradio/_simple_templates/simpletextbox.py b/gradio/_simple_templates/simpletextbox.py
index 29ea0ed0cfd5..e704f85bf232 100644
--- a/gradio/_simple_templates/simpletextbox.py
+++ b/gradio/_simple_templates/simpletextbox.py
@@ -35,7 +35,9 @@ def __init__(
         rtl: bool = False,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
-        **kwargs,
+        render: bool = True,
+        root_url: str | None = None,
+        _skip_init_processing: bool = False,
     ):
         """
         Parameters:
@@ -51,6 +53,8 @@ def __init__(
             rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            root_url: The remote URL that of the Gradio app that this component belongs to. Used in `gr.load()`. Should not be set manually.
         """
         self.placeholder = placeholder
         self.rtl = rtl
@@ -65,7 +69,9 @@ def __init__(
             elem_id=elem_id,
             elem_classes=elem_classes,
             value=value,
-            **kwargs,
+            render=render,
+            root_url=root_url,
+            _skip_init_processing=_skip_init_processing,
         )
 
     def preprocess(self, x: str | None) -> str | None:
diff --git a/gradio/cli/commands/components/show.py b/gradio/cli/commands/components/show.py
index 6834dcf77646..afd63fb9a319 100644
--- a/gradio/cli/commands/components/show.py
+++ b/gradio/cli/commands/components/show.py
@@ -25,6 +25,8 @@
     "State",
 }
 
+_BEGINNER_FRIENDLY = {"Slider", "Radio", "Checkbox", "Number", "CheckboxGroup", "File"}
+
 
 def _get_table_items(module):
     items = []
@@ -35,12 +37,12 @@ def _get_table_items(module):
         ) or (name in _IGNORE):
             continue
         tags = []
-        if "Simple" in name or name in {"File"}:
-            tags.append("🌱🤝Beginner Friendly🌱🤝")
+        if "Simple" in name or name in _BEGINNER_FRIENDLY:
+            tags.append(":seedling::handshake:Beginner Friendly:seedling::handshake:")
         if issubclass(gr_cls, FormComponent):
-            tags.append("📝🧩Form Component📝🧩")
+            tags.append(":pencil::jigsaw:Form Component:pencil::jigsaw:")
         if name in gradio.layouts.__all__:
-            tags.append("📐Layout📐")
+            tags.append(":triangular_ruler:Layout:triangular_ruler:")
         doc = inspect.getdoc(gr_cls) or "No description available."
         doc = doc.split(".")[0]
         if tags:
diff --git a/gradio/components/video.py b/gradio/components/video.py
index 128349825d0b..82679bed5e62 100644
--- a/gradio/components/video.py
+++ b/gradio/components/video.py
@@ -52,6 +52,7 @@ class Video(Component):
         Events.play,
         Events.pause,
         Events.end,
+        Events.upload,
     ]
 
     def __init__(
diff --git a/js/checkbox/Index.svelte b/js/checkbox/Index.svelte
index bd54a9ea5694..55510b2695cb 100644
--- a/js/checkbox/Index.svelte
+++ b/js/checkbox/Index.svelte
@@ -1,10 +1,15 @@
+<script context="module" lang="ts">
+	export { default as BaseCheckbox } from "./shared/Checkbox.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Checkbox from "./shared/Checkbox.svelte";
 	import { Block, Info } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import type { SelectData } from "@gradio/utils";
+	import { afterUpdate } from "svelte";
+	import BaseCheckbox from "./shared/Checkbox.svelte";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -23,6 +28,19 @@
 		input: never;
 	}>;
 	export let mode: "static" | "interactive";
+
+	function handle_change(): void {
+		gradio.dispatch("change");
+		if (!value_is_output) {
+			gradio.dispatch("input");
+		}
+	}
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+
+	// When the value changes, dispatch the change event via handle_change()
+	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -36,13 +54,11 @@
 		<Info>{info}</Info>
 	{/if}
 
-	<Checkbox
-		{label}
+	<BaseCheckbox
 		bind:value
-		bind:value_is_output
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
+		{label}
+		{mode}
+		on:change={handle_change}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
-		disabled={mode === "static"}
 	/>
 </Block>
diff --git a/js/checkbox/package.json b/js/checkbox/package.json
index 8b372a0282b5..9ab80a54da25 100644
--- a/js/checkbox/package.json
+++ b/js/checkbox/package.json
@@ -7,6 +7,7 @@
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
+	"main": "./Index.svelte",
 	"exports": {
 		".": "./Index.svelte",
 		"./example": "./Example.svelte",
diff --git a/js/checkbox/shared/Checkbox.svelte b/js/checkbox/shared/Checkbox.svelte
index fb2e05474257..a0f5f1553b16 100644
--- a/js/checkbox/shared/Checkbox.svelte
+++ b/js/checkbox/shared/Checkbox.svelte
@@ -1,51 +1,51 @@
 <script lang="ts">
-	import { createEventDispatcher, afterUpdate } from "svelte";
 	import type { SelectData } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
 
-	export let value: boolean;
-	export let value_is_output = false;
-	export let disabled = false;
-	export let label: string;
+	export let value = false;
+	export let label = "Checkbox";
+	export let mode: "static" | "interactive";
 
 	const dispatch = createEventDispatcher<{
 		change: boolean;
 		select: SelectData;
-		input: undefined;
 	}>();
 
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
+	// When the value changes, dispatch the change event via handle_change()
+	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
+	$: value, dispatch("change", value);
+	$: disabled = mode === "static";
+
+	async function handle_enter(
+		event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }
+	): Promise<void> {
+		if (event.key === "Enter") {
+			value = !value;
+			dispatch("select", {
+				index: 0,
+				value: event.currentTarget.checked,
+				selected: event.currentTarget.checked
+			});
 		}
 	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
+
+	async function handle_input(
+		event: Event & { currentTarget: EventTarget & HTMLInputElement }
+	): Promise<void> {
+		value = event.currentTarget.checked;
+		dispatch("select", {
+			index: 0,
+			value: event.currentTarget.checked,
+			selected: event.currentTarget.checked
+		});
+	}
 </script>
 
 <label class:disabled>
 	<input
 		bind:checked={value}
-		on:keydown={(event) => {
-			if (event.key === "Enter") {
-				value = !value;
-				dispatch("select", {
-					index: 0,
-					value: label,
-					selected: value
-				});
-			}
-		}}
-		on:input={(evt) => {
-			value = evt.currentTarget.checked;
-			dispatch("select", {
-				index: 0,
-				value: label,
-				selected: evt.currentTarget.checked
-			});
-		}}
+		on:keydown={handle_enter}
+		on:input={handle_input}
 		{disabled}
 		type="checkbox"
 		name="test"
diff --git a/js/checkboxgroup/Checkboxgroup.stories.svelte b/js/checkboxgroup/Checkboxgroup.stories.svelte
index 6a2d1dbba479..18ef3a793783 100644
--- a/js/checkboxgroup/Checkboxgroup.stories.svelte
+++ b/js/checkboxgroup/Checkboxgroup.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Checkboxgroup from "./shared/Checkboxgroup.svelte";
+	import Checkboxgroup from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/checkboxgroup/Index.svelte b/js/checkboxgroup/Index.svelte
index 1d80392f937e..96c3ff7b712a 100644
--- a/js/checkboxgroup/Index.svelte
+++ b/js/checkboxgroup/Index.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import CheckboxGroup from "./shared/Checkboxgroup.svelte";
-	import { Block } from "@gradio/atoms";
+	import { Block, BlockTitle } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
+	import { afterUpdate } from "svelte";
 
 	export let gradio: Gradio<{
 		change: never;
@@ -25,6 +25,35 @@
 
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "interactive";
+
+	let old_value: (string | number)[] = value.slice();
+
+	function toggleChoice(choice: string | number): void {
+		// update the old
+		if (old_value.includes(choice)) {
+			old_value.splice(old_value.indexOf(choice), 1);
+		} else {
+			old_value.push(choice);
+		}
+		old_value = [...old_value];
+	}
+
+	function handle_change(): void {
+		gradio.dispatch("change");
+		if (!value_is_output) {
+			gradio.dispatch("input");
+		}
+	}
+
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+
+	$: disabled = mode === "static";
+
+	// When old_value changes, update value and call handle_change()
+	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
+	$: (value = [...old_value]), handle_change();
 </script>
 
 <Block
@@ -41,17 +70,114 @@
 		i18n={gradio.i18n}
 		{...loading_status}
 	/>
+	<BlockTitle {show_label} {info}>{label}</BlockTitle>
 
-	<CheckboxGroup
-		bind:value
-		bind:value_is_output
-		{choices}
-		{label}
-		{info}
-		{show_label}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		disabled={mode === "static"}
-	/>
+	<div class="wrap" data-testid="checkbox-group">
+		{#each choices as choice, i}
+			<label class:disabled class:selected={value.includes(choice[1])}>
+				<input
+					{disabled}
+					on:change={() => toggleChoice(choice[1])}
+					on:input={(evt) =>
+						gradio.dispatch("select", {
+							index: i,
+							value: choice[1],
+							selected: evt.currentTarget.checked
+						})}
+					on:keydown={(event) => {
+						if (event.key === "Enter") {
+							toggleChoice(choice[1]);
+							gradio.dispatch("select", {
+								index: i,
+								value: choice[1],
+								selected: !value.includes(choice[1])
+							});
+						}
+					}}
+					checked={value.includes(choice[1])}
+					type="checkbox"
+					name={choice[1]?.toString()}
+					title={choice[1]?.toString()}
+				/>
+				<span class="ml-2">{choice[0]}</span>
+			</label>
+		{/each}
+	</div>
 </Block>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--checkbox-label-gap);
+	}
+	label {
+		display: flex;
+		align-items: center;
+		transition: var(--button-transition);
+		cursor: pointer;
+		box-shadow: var(--checkbox-label-shadow);
+		border: var(--checkbox-label-border-width) solid
+			var(--checkbox-label-border-color);
+		border-radius: var(--button-small-radius);
+		background: var(--checkbox-label-background-fill);
+		padding: var(--checkbox-label-padding);
+		color: var(--checkbox-label-text-color);
+		font-weight: var(--checkbox-label-text-weight);
+		font-size: var(--checkbox-label-text-size);
+		line-height: var(--line-md);
+	}
+
+	label:hover {
+		background: var(--checkbox-label-background-fill-hover);
+	}
+	label:focus {
+		background: var(--checkbox-label-background-fill-focus);
+	}
+	label.selected {
+		background: var(--checkbox-label-background-fill-selected);
+		color: var(--checkbox-label-text-color-selected);
+	}
+
+	label > * + * {
+		margin-left: var(--size-2);
+	}
+
+	input {
+		--ring-color: transparent;
+		position: relative;
+		box-shadow: var(--checkbox-shadow);
+		border: var(--checkbox-border-width) solid var(--checkbox-border-color);
+		border-radius: var(--checkbox-border-radius);
+		background-color: var(--checkbox-background-color);
+		line-height: var(--line-sm);
+	}
+
+	input:checked,
+	input:checked:hover,
+	input:checked:focus {
+		border-color: var(--checkbox-border-color-selected);
+		background-image: var(--checkbox-check);
+		background-color: var(--checkbox-background-color-selected);
+	}
+
+	input:checked:focus {
+		border-color: var(--checkbox-border-color-focus);
+		background-image: var(--checkbox-check);
+		background-color: var(--checkbox-background-color-selected);
+	}
+
+	input:hover {
+		border-color: var(--checkbox-border-color-hover);
+		background-color: var(--checkbox-background-color-hover);
+	}
+
+	input:not(:checked):focus {
+		border-color: var(--checkbox-border-color-focus);
+	}
+
+	input[disabled],
+	.disabled {
+		cursor: not-allowed;
+	}
+</style>
diff --git a/js/checkboxgroup/shared/Checkboxgroup.svelte b/js/checkboxgroup/shared/Checkboxgroup.svelte
deleted file mode 100644
index ca801986ff88..000000000000
--- a/js/checkboxgroup/shared/Checkboxgroup.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, afterUpdate } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-	import type { SelectData } from "@gradio/utils";
-
-	export let value: (string | number)[] = [];
-	let old_value: (string | number)[] = value.slice();
-	export let value_is_output = false;
-	export let choices: [string, string | number][];
-	export let disabled = false;
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let show_label: boolean;
-
-	const dispatch = createEventDispatcher<{
-		change: (string | number)[];
-		input: undefined;
-		select: SelectData;
-	}>();
-
-	function toggleChoice(choice: string | number): void {
-		if (value.includes(choice)) {
-			value.splice(value.indexOf(choice), 1);
-		} else {
-			value.push(choice);
-		}
-		value = value;
-	}
-
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value.slice();
-			handle_change();
-		}
-	}
-</script>
-
-<BlockTitle {show_label} {info}>{label}</BlockTitle>
-
-<div class="wrap" data-testid="checkbox-group">
-	{#each choices as choice, i}
-		<label class:disabled class:selected={value.includes(choice[1])}>
-			<input
-				{disabled}
-				on:change={() => toggleChoice(choice[1])}
-				on:input={(evt) =>
-					dispatch("select", {
-						index: i,
-						value: choice[1],
-						selected: evt.currentTarget.checked
-					})}
-				on:keydown={(event) => {
-					if (event.key === "Enter") {
-						toggleChoice(choice[1]);
-						dispatch("select", {
-							index: i,
-							value: choice[1],
-							selected: !value.includes(choice[1])
-						});
-					}
-				}}
-				checked={value.includes(choice[1])}
-				type="checkbox"
-				name={choice[1]?.toString()}
-				title={choice[1]?.toString()}
-			/>
-			<span class="ml-2">{choice[0]}</span>
-		</label>
-	{/each}
-</div>
-
-<style>
-	.wrap {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--checkbox-label-gap);
-	}
-	label {
-		display: flex;
-		align-items: center;
-		transition: var(--button-transition);
-		cursor: pointer;
-		box-shadow: var(--checkbox-label-shadow);
-		border: var(--checkbox-label-border-width) solid
-			var(--checkbox-label-border-color);
-		border-radius: var(--button-small-radius);
-		background: var(--checkbox-label-background-fill);
-		padding: var(--checkbox-label-padding);
-		color: var(--checkbox-label-text-color);
-		font-weight: var(--checkbox-label-text-weight);
-		font-size: var(--checkbox-label-text-size);
-		line-height: var(--line-md);
-	}
-
-	label:hover {
-		background: var(--checkbox-label-background-fill-hover);
-	}
-	label:focus {
-		background: var(--checkbox-label-background-fill-focus);
-	}
-	label.selected {
-		background: var(--checkbox-label-background-fill-selected);
-		color: var(--checkbox-label-text-color-selected);
-	}
-
-	label > * + * {
-		margin-left: var(--size-2);
-	}
-
-	input {
-		--ring-color: transparent;
-		position: relative;
-		box-shadow: var(--checkbox-shadow);
-		border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-		border-radius: var(--checkbox-border-radius);
-		background-color: var(--checkbox-background-color);
-		line-height: var(--line-sm);
-	}
-
-	input:checked,
-	input:checked:hover,
-	input:checked:focus {
-		border-color: var(--checkbox-border-color-selected);
-		background-image: var(--checkbox-check);
-		background-color: var(--checkbox-background-color-selected);
-	}
-
-	input:checked:focus {
-		border-color: var(--checkbox-border-color-focus);
-		background-image: var(--checkbox-check);
-		background-color: var(--checkbox-background-color-selected);
-	}
-
-	input:hover {
-		border-color: var(--checkbox-border-color-hover);
-		background-color: var(--checkbox-background-color-hover);
-	}
-
-	input:not(:checked):focus {
-		border-color: var(--checkbox-border-color-focus);
-	}
-
-	input[disabled],
-	.disabled {
-		cursor: not-allowed;
-	}
-</style>
diff --git a/js/number/Index.svelte b/js/number/Index.svelte
index 25c686892a29..7a17939ce46b 100644
--- a/js/number/Index.svelte
+++ b/js/number/Index.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Number from "./shared/Number.svelte";
-	import { Block } from "@gradio/atoms";
+	import { Block, BlockTitle } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
+	import { afterUpdate, tick } from "svelte";
 
 	export let gradio: Gradio<{
 		change: never;
@@ -28,6 +28,29 @@
 	export let value_is_output = false;
 	export let step: number | null = null;
 	export let mode: "static" | "interactive";
+
+	function handle_change(): void {
+		if (!isNaN(value) && value !== null) {
+			gradio.dispatch("change");
+			if (!value_is_output) {
+				gradio.dispatch("input");
+			}
+		}
+	}
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+
+	async function handle_keypress(e: KeyboardEvent): Promise<void> {
+		await tick();
+		if (e.key === "Enter") {
+			e.preventDefault();
+			gradio.dispatch("submit");
+		}
+	}
+
+	$: value, handle_change();
+	$: disabled = mode === "static";
 </script>
 
 <Block
@@ -44,21 +67,61 @@
 		i18n={gradio.i18n}
 		{...loading_status}
 	/>
-	<Number
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{minimum}
-		{maximum}
-		{step}
-		{container}
-		disabled={mode === "static"}
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:focus={() => gradio.dispatch("focus")}
-	/>
+	<label class="block" class:container>
+		<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		<input
+			aria-label={label}
+			type="number"
+			bind:value
+			min={minimum}
+			max={maximum}
+			{step}
+			on:keypress={handle_keypress}
+			on:blur={() => gradio.dispatch("blur")}
+			on:focus={() => gradio.dispatch("focus")}
+			{disabled}
+		/>
+	</label>
 </Block>
+
+<style>
+	label:not(.container),
+	label:not(.container) > input {
+		height: 100%;
+		border: none;
+	}
+	.container > input {
+		border: var(--input-border-width) solid var(--input-border-color);
+		border-radius: var(--input-radius);
+	}
+	input[type="number"] {
+		display: block;
+		position: relative;
+		outline: none !important;
+		box-shadow: var(--input-shadow);
+		background: var(--input-background-fill);
+		padding: var(--input-padding);
+		width: 100%;
+		color: var(--body-text-color);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
+
+	input:focus {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	input::placeholder {
+		color: var(--input-placeholder-color);
+	}
+
+	input:out-of-range {
+		border: var(--input-border-width) solid var(--error-border-color);
+	}
+</style>
diff --git a/js/number/shared/Number.svelte b/js/number/shared/Number.svelte
deleted file mode 100644
index 2d2697a698f8..000000000000
--- a/js/number/shared/Number.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { afterUpdate, createEventDispatcher, tick } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-
-	export let value = 0;
-	export let minimum: number | undefined = undefined;
-	export let maximum: number | undefined = undefined;
-	export let value_is_output = false;
-	export let disabled = false;
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let show_label = true;
-	export let container = true;
-	export let step: number | null = 1;
-
-	const dispatch = createEventDispatcher<{
-		change: number;
-		submit: undefined;
-		blur: undefined;
-		input: undefined;
-		focus: undefined;
-	}>();
-
-	function handle_change(): void {
-		if (!isNaN(value) && value !== null) {
-			dispatch("change", value);
-			if (!value_is_output) {
-				dispatch("input");
-			}
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
-
-	async function handle_keypress(e: KeyboardEvent): Promise<void> {
-		await tick();
-		if (e.key === "Enter") {
-			e.preventDefault();
-			dispatch("submit");
-		}
-	}
-</script>
-
-<label class="block" class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
-	<input
-		aria-label={label}
-		type="number"
-		bind:value
-		min={minimum}
-		max={maximum}
-		{step}
-		on:keypress={handle_keypress}
-		on:blur
-		on:focus
-		{disabled}
-	/>
-</label>
-
-<style>
-	label:not(.container),
-	label:not(.container) > input {
-		height: 100%;
-		border: none;
-	}
-	.container > input {
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-	}
-	input[type="number"] {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		background: var(--input-background-fill);
-		padding: var(--input-padding);
-		width: 100%;
-		color: var(--body-text-color);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-	}
-	input:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder {
-		color: var(--input-placeholder-color);
-	}
-
-	input:out-of-range {
-		border: var(--input-border-width) solid var(--error-border-color);
-	}
-</style>
diff --git a/js/radio/Index.svelte b/js/radio/Index.svelte
index 7aa926d17f56..f36a9cf4cfeb 100644
--- a/js/radio/Index.svelte
+++ b/js/radio/Index.svelte
@@ -1,9 +1,14 @@
+<script context="module" lang="ts">
+	export { default as BaseRadio } from "./shared/Radio.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import Radio from "./shared/Radio.svelte";
-	import { Block } from "@gradio/atoms";
+	import { afterUpdate } from "svelte";
+	import { Block, BlockTitle } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
+	import BaseRadio from "./shared/Radio.svelte";
 
 	export let gradio: Gradio<{
 		change: never;
@@ -24,6 +29,20 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "interactive";
+
+	function handle_change(): void {
+		gradio.dispatch("change");
+		if (!value_is_output) {
+			gradio.dispatch("input");
+		}
+	}
+
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+	$: value, handle_change();
+
+	$: disabled = mode === "static";
 </script>
 
 <Block
@@ -41,17 +60,27 @@
 		{...loading_status}
 	/>
 
-	<Radio
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{elem_id}
-		{show_label}
-		{choices}
-		disabled={mode === "static"}
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-	/>
+	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+
+	<div class="wrap">
+		{#each choices as choice, i (i)}
+			<BaseRadio
+				display_value={choice[0]}
+				internal_value={choice[1]}
+				bind:selected={value}
+				{elem_id}
+				{disabled}
+				on:input={() =>
+					gradio.dispatch("select", { value: choice[1], index: i })}
+			/>
+		{/each}
+	</div>
 </Block>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--checkbox-label-gap);
+	}
+</style>
diff --git a/js/radio/package.json b/js/radio/package.json
index a7ee1a0983d1..07e2504d345e 100644
--- a/js/radio/package.json
+++ b/js/radio/package.json
@@ -7,6 +7,7 @@
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
+	"main": "./Index.svelte",
 	"exports": {
 		".": "./Index.svelte",
 		"./example": "./Example.svelte",
diff --git a/js/radio/shared/Radio.svelte b/js/radio/shared/Radio.svelte
index 9d5d0ab7e931..7186bff01215 100644
--- a/js/radio/shared/Radio.svelte
+++ b/js/radio/shared/Radio.svelte
@@ -1,63 +1,33 @@
 <script lang="ts">
-	import { createEventDispatcher, afterUpdate } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-	import type { SelectData } from "@gradio/utils";
-
-	export let value: string | number | null;
-	export let value_is_output = false;
-	export let choices: [string, string | number][];
+	import { createEventDispatcher } from "svelte";
+	export let display_value: string;
+	export let internal_value: string | number;
 	export let disabled = false;
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let show_label = true;
-	export let elem_id: string;
+	export let elem_id = "";
+	export let selected: string | number | null = null;
 
-	const dispatch = createEventDispatcher<{
-		change: string | number | null;
-		input: undefined;
-		select: SelectData;
-	}>();
+	const dispatch = createEventDispatcher<{ input: string | number }>();
 
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
+	$: is_selected = selected === internal_value;
 </script>
 
-<BlockTitle {show_label} {info}>{label}</BlockTitle>
-
-<div class="wrap">
-	{#each choices as choice, i (i)}
-		<label
-			class:disabled
-			class:selected={value === choice[1]}
-			data-testid={`${choice[1]}-radio-label`}
-		>
-			<input
-				{disabled}
-				bind:group={value}
-				on:input={() => dispatch("select", { value: choice[1], index: i })}
-				type="radio"
-				name="radio-{elem_id}"
-				value={choice[1]}
-			/>
-			<span class="ml-2">{choice[0]}</span>
-		</label>
-	{/each}
-</div>
+<label
+	class:disabled
+	class:selected={is_selected}
+	data-testid={`${internal_value}-radio-label`}
+>
+	<input
+		{disabled}
+		type="radio"
+		name={`radio-${elem_id}`}
+		value={internal_value}
+		on:input={() => dispatch("input", internal_value)}
+		bind:group={selected}
+	/>
+	<span class="ml-2">{display_value}</span>
+</label>
 
 <style>
-	.wrap {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--checkbox-label-gap);
-	}
 	label {
 		display: flex;
 		align-items: center;
diff --git a/js/slider/Index.svelte b/js/slider/Index.svelte
index 4b41102074e5..477c3e2f4bf8 100644
--- a/js/slider/Index.svelte
+++ b/js/slider/Index.svelte
@@ -1,9 +1,13 @@
+<script context="module">
+	let _id = 0;
+</script>
+
 <script lang="ts">
-	import type { Gradio, ShareData } from "@gradio/utils";
-	import Slider from "./shared/Range.svelte";
-	import { Block } from "@gradio/atoms";
+	import type { Gradio } from "@gradio/utils";
+	import { Block, BlockTitle } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
+	import { afterUpdate } from "svelte";
 
 	export let gradio: Gradio<{
 		change: never;
@@ -24,9 +28,51 @@
 	export let step: number;
 	export let show_label: boolean;
 	export let mode: "static" | "interactive";
-
 	export let loading_status: LoadingStatus;
 	export let value_is_output = false;
+
+	let rangeInput: HTMLInputElement;
+	let numberInput: HTMLInputElement;
+
+	const id = `range_id_${_id++}`;
+
+	function handle_change(): void {
+		gradio.dispatch("change");
+		if (!value_is_output) {
+			gradio.dispatch("input");
+		}
+	}
+	afterUpdate(() => {
+		value_is_output = false;
+		setSlider();
+	});
+
+	function handle_release(e: MouseEvent): void {
+		gradio.dispatch("release", value);
+	}
+	function clamp(): void {
+		gradio.dispatch("release", value);
+		value = Math.min(Math.max(value, minimum), maximum);
+	}
+
+	function setSlider(): void {
+		setSliderRange();
+		rangeInput.addEventListener("input", setSliderRange);
+		numberInput.addEventListener("input", setSliderRange);
+	}
+	function setSliderRange(): void {
+		rangeInput.style.backgroundSize =
+			((Number(rangeInput.value) - Number(rangeInput.min)) /
+				(Number(rangeInput.max) - Number(rangeInput.min))) *
+				100 +
+			"% 100%";
+	}
+
+	$: disabled = mode === "static";
+
+	// When the value changes, dispatch the change event via handle_change()
+	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
+	$: value, handle_change();
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -36,18 +82,127 @@
 		{...loading_status}
 	/>
 
-	<Slider
+	<div class="wrap">
+		<div class="head">
+			<label for={id}>
+				<BlockTitle {show_label} {info}>{label}</BlockTitle>
+			</label>
+
+			<input
+				aria-label={`number input for ${label}`}
+				data-testid="number-input"
+				type="number"
+				bind:value
+				bind:this={numberInput}
+				min={minimum}
+				max={maximum}
+				on:blur={clamp}
+				{step}
+				{disabled}
+				on:pointerup={handle_release}
+			/>
+		</div>
+	</div>
+
+	<input
+		type="range"
+		{id}
+		name="cowbell"
 		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{minimum}
-		{maximum}
+		bind:this={rangeInput}
+		min={minimum}
+		max={maximum}
 		{step}
-		disabled={mode === "static"}
-		on:input={() => gradio.dispatch("input")}
-		on:change={() => gradio.dispatch("change")}
-		on:release={(e) => gradio.dispatch("release", e.detail)}
+		{disabled}
+		on:pointerup={handle_release}
+		aria-label={`range slider for ${label}`}
 	/>
 </Block>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.head {
+		display: flex;
+		justify-content: space-between;
+	}
+	input[type="number"] {
+		display: block;
+		position: relative;
+		outline: none !important;
+		box-shadow: var(--input-shadow);
+		border: var(--input-border-width) solid var(--input-border-color);
+		border-radius: var(--input-radius);
+		background: var(--input-background-fill);
+		padding: var(--size-2) var(--size-2);
+		height: var(--size-6);
+		color: var(--body-text-color);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+		text-align: center;
+	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
+
+	input[type="number"]:focus {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	input::placeholder {
+		color: var(--input-placeholder-color);
+	}
+
+	input[disabled] {
+		cursor: not-allowed;
+	}
+
+	input[type="range"] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		accent-color: var(--slider-color);
+		height: 4px;
+		background: var(--neutral-200);
+		border-radius: 5px;
+		background-image: linear-gradient(var(--slider-color), var(--slider-color));
+		background-size: 0% 100%;
+		background-repeat: no-repeat;
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		box-shadow: var(--input-shadow);
+		border: solid 0.5px #ddd;
+		height: 20px;
+		width: 20px;
+		border-radius: 50%;
+		background-color: white;
+		cursor: pointer;
+		margin-top: -2px;
+		transition: background-color 0.1s ease;
+	}
+
+	input[type="range"]::-webkit-slider-thumb:hover {
+		background: var(--neutral-50);
+	}
+
+	input[type="range"]::-webkit-slider-runnable-track {
+		-webkit-appearance: none;
+		box-shadow: none;
+		border: none;
+		background: transparent;
+		height: 400%;
+	}
+
+	input[type=range]::-moz-range-track {
+		height: 12px;
+	}
+</style>
diff --git a/js/slider/shared/Range.svelte b/js/slider/shared/Range.svelte
deleted file mode 100644
index 793509437c8b..000000000000
--- a/js/slider/shared/Range.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<script context="module">
-	let _id = 0;
-</script>
-
-<script lang="ts">
-	import { createEventDispatcher, afterUpdate } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-
-	export let value = 0;
-	export let value_is_output = false;
-	export let minimum = 0;
-	export let maximum = 100;
-	export let step = 1;
-	export let disabled = false;
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let show_label: boolean;
-	let rangeInput: HTMLInputElement;
-	let numberInput: HTMLInputElement;
-
-	const id = `range_id_${_id++}`;
-	const dispatch = createEventDispatcher<{
-		change: number;
-		input: undefined;
-		release: number;
-	}>();
-
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-		setSlider();
-	});
-	$: value, handle_change();
-
-	function handle_release(e: MouseEvent): void {
-		dispatch("release", value);
-	}
-	function clamp(): void {
-		dispatch("release", value);
-		value = Math.min(Math.max(value, minimum), maximum);
-	}
-
-	function setSlider(): void {
-		setSliderRange();
-		rangeInput.addEventListener("input", setSliderRange);
-		numberInput.addEventListener("input", setSliderRange);
-	}
-	function setSliderRange(): void {
-		rangeInput.style.backgroundSize =
-			((Number(rangeInput.value) - Number(rangeInput.min)) /
-				(Number(rangeInput.max) - Number(rangeInput.min))) *
-				100 +
-			"% 100%";
-	}
-</script>
-
-<div class="wrap">
-	<div class="head">
-		<label for={id}>
-			<BlockTitle {show_label} {info}>{label}</BlockTitle>
-		</label>
-
-		<input
-			aria-label={`number input for ${label}`}
-			data-testid="number-input"
-			type="number"
-			bind:value
-			bind:this={numberInput}
-			min={minimum}
-			max={maximum}
-			on:blur={clamp}
-			{step}
-			{disabled}
-			on:pointerup={handle_release}
-		/>
-	</div>
-</div>
-
-<input
-	type="range"
-	{id}
-	name="cowbell"
-	bind:value
-	bind:this={rangeInput}
-	min={minimum}
-	max={maximum}
-	{step}
-	{disabled}
-	on:pointerup={handle_release}
-	aria-label={`range slider for ${label}`}
-/>
-
-<style>
-	.wrap {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-	}
-
-	.head {
-		display: flex;
-		justify-content: space-between;
-	}
-	input[type="number"] {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-		background: var(--input-background-fill);
-		padding: var(--size-2) var(--size-2);
-		height: var(--size-6);
-		color: var(--body-text-color);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-		text-align: center;
-	}
-	input:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input[type="number"]:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder {
-		color: var(--input-placeholder-color);
-	}
-
-	input[disabled] {
-		cursor: not-allowed;
-	}
-
-	input[type="range"] {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 100%;
-		accent-color: var(--slider-color);
-		height: 4px;
-		background: var(--neutral-200);
-		border-radius: 5px;
-		background-image: linear-gradient(var(--slider-color), var(--slider-color));
-		background-size: 0% 100%;
-		background-repeat: no-repeat;
-	}
-
-	input[type=range]::-moz-range-track {
-		height: 12px;
-	}
-
-	input[type="range"]::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		box-shadow: var(--input-shadow);
-		border: solid 0.5px #ddd;
-		height: 20px;
-		width: 20px;
-		border-radius: 50%;
-		background-color: white;
-		cursor: pointer;
-		margin-top: -2px;
-		transition: background-color 0.1s ease;
-	}
-
-	input[type="range"]::-webkit-slider-thumb:hover {
-		background: var(--neutral-50);
-	}
-
-	input[type="range"]::-webkit-slider-runnable-track {
-		-webkit-appearance: none;
-		box-shadow: none;
-		border: none;
-		background: transparent;
-		height: 400%;
-	}
-</style>