diff --git a/src/ui/components/index.ts b/src/ui/components/index.ts
index 64a6d2b..ed4f976 100644
--- a/src/ui/components/index.ts
+++ b/src/ui/components/index.ts
@@ -1,7 +1,8 @@
-import "./field";
-import "./label";
-import "./option";
-import "./radio-group";
-import "./switch";
-import "./text-area";
-import "./text-field";
+export * from "./field";
+export * from "./label";
+export * from "./option";
+export * from "./radio";
+export * from "./radio-group";
+export * from "./switch";
+export * from "./text-area";
+export * from "./text-field";
diff --git a/src/ui/components/option.ts b/src/ui/components/option.ts
index 2365490..68af222 100644
--- a/src/ui/components/option.ts
+++ b/src/ui/components/option.ts
@@ -11,21 +11,22 @@ export class SDOptionElement extends LitElement {
 	/**
 	 * Private backing field for {@link SDOptionElement.value}.
 	 */
-	#value: boolean | number | string | undefined;
+	#value: boolean | number | string | null | undefined = null;
 
 	/**
 	 * Determines whether the option is disabled; default `false`.
 	 */
-	@property({ type: Boolean })
+	@property({
+		reflect: true,
+		type: Boolean,
+	})
 	public accessor disabled: boolean = false;
 
 	/**
-	 * Label that represents the option; read from the `innerText` of the element.
-	 * @returns The label.
+	 * Label that represents the option.
 	 */
-	public get label(): string {
-		return this.innerText;
-	}
+	@property()
+	public accessor label: string | undefined;
 
 	/**
 	 * Type of the value; allows for the value to be converted to a boolean or number.
@@ -44,9 +45,36 @@ export class SDOptionElement extends LitElement {
 	 * @returns The value.
 	 */
 	public get value(): boolean | number | string | undefined {
+		if (this.#value === null) {
+			if (this.type === "boolean") {
+				this.#value = parseBoolean(this.htmlValue);
+			} else if (this.type === "number") {
+				this.#value = parseNumber(this.htmlValue);
+			} else {
+				this.#value = this.htmlValue;
+			}
+		}
+
 		return this.#value;
 	}
 
+	/**
+	 * Sets the value of the option, and associated type.
+	 * @param value New value.
+	 */
+	public set value(value: boolean | number | string | undefined) {
+		this.type = typeof value === "number" ? "number" : typeof value === "boolean" ? "boolean" : "string";
+		this.htmlValue = value?.toString();
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected override update(changedProperties: Map<PropertyKey, unknown>): void {
+		super.update(changedProperties);
+		this.dispatchEvent(new Event("update"));
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -54,13 +82,7 @@ export class SDOptionElement extends LitElement {
 		super.willUpdate(_changedProperties);
 
 		if (_changedProperties.has("type") || _changedProperties.has("value")) {
-			if (this.type === "boolean") {
-				this.#value = parseBoolean(this.htmlValue);
-			} else if (this.type === "number") {
-				this.#value = parseNumber(this.htmlValue);
-			} else {
-				this.#value = this.htmlValue;
-			}
+			this.#value = null;
 		}
 	}
 }
diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index 6d53d17..8f455b0 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -1,11 +1,10 @@
 import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 
 import { Input } from "../mixins/input";
 import { List } from "../mixins/list";
-import { preventDoubleClickSelection } from "../utils";
+import { SDRadioElement } from "./radio";
 
 /**
  * Element that offers persisting a value via a list of radio options.
@@ -17,92 +16,10 @@ export class SDRadioGroupElement extends List(Input<boolean | number | string>(L
 	 */
 	public static styles = [
 		super.styles ?? [],
+		...SDRadioElement.styles,
 		css`
-			label {
+			sd-radio {
 				display: flex;
-				align-items: center;
-			}
-
-			input {
-				/* Hide the input, whilst still allowing focus */
-				height: 0;
-				opacity: 0;
-				position: absolute;
-				width: 0;
-			}
-
-			/**
-			 * Radio button replacement.
-			 */
-
-			.indicator {
-				--size: calc(var(--size-m) - calc(var(--border-width-thin) * 2));
-				align-items: center;
-				border: var(--border-width-thin) solid var(--color-content-disabled);
-				border-radius: var(--rounding-full);
-				display: inline-flex;
-				height: var(--size);
-				justify-content: center;
-				margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
-				user-select: none;
-				width: var(--size);
-			}
-
-			/**
-			 * Checked.
-			 */
-
-			input:checked {
-				& + .indicator {
-					background: var(--color-surface-accent);
-					border-color: var(--color-content-disabled);
-					border-radius: var(--rounding-full);
-				}
-
-				& + .indicator::before {
-					content: "";
-					background: var(--color-surface-ondark);
-					border-radius: var(--rounding-full);
-					display: block;
-					height: var(--size-xs);
-					width: var(--size-xs);
-				}
-			}
-
-			/**
-			 * Disabled.
-			 */
-
-			label:has(input:disabled) {
-				color: var(--color-content-disabled);
-			}
-
-			input:disabled + .indicator {
-				border-color: var(--color-border-subtle-disabled);
-			}
-
-			/**
-			 * Checked + disabled.
-			 */
-
-			input:checked:disabled {
-				& + .indicator {
-					background-color: var(--color-surface-disabled);
-				}
-
-				& + .indicator::before {
-					background-color: var(--color-content-disabled);
-				}
-			}
-
-			/**
-			 * Focus
-			 */
-
-			input:focus-visible + .indicator {
-				box-shadow: var(--highlight-box-shadow);
-				outline: var(--highlight-outline--focus);
-				outline-offset: var(--highlight-outline-offset);
 			}
 		`,
 	];
@@ -114,25 +31,19 @@ export class SDRadioGroupElement extends List(Input<boolean | number | string>(L
 		return html`
 			${repeat(
 				this.items,
-				({ key }) => key,
-				({ disabled, label, value }) => {
-					return html`
-						<label role="radio" @mousedown=${preventDoubleClickSelection}>
-							<input
-								name="radio"
-								type="radio"
-								value=${ifDefined(value)}
-								tabindex=${ifDefined(disabled ? undefined : 0)}
-								.checked=${this.value === value}
-								.disabled=${disabled}
-								@change=${(): void => {
-									this.value = value;
-								}}
-							/>
-							<span class="indicator"></span>
-							${label}
-						</label>
-					`;
+				(opt) => opt,
+				(opt) => {
+					return html`<sd-radio
+						name="__radio"
+						.checked=${this.value === opt.value}
+						.disabled=${opt.disabled}
+						.label=${opt.label}
+						.value=${opt.value}
+						@change=${(): void => {
+							this.value = opt.value;
+						}}
+						>${opt.innerText}</sd-radio
+					>`;
 				},
 			)}
 		`;
diff --git a/src/ui/components/radio.ts b/src/ui/components/radio.ts
new file mode 100644
index 0000000..c5a4904
--- /dev/null
+++ b/src/ui/components/radio.ts
@@ -0,0 +1,201 @@
+import { css, html, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { preventDoubleClickSelection } from "../utils";
+import { SDOptionElement } from "./option";
+
+/**
+ * Element that offers an option in the form of a radio button.
+ */
+@customElement("sd-radio")
+export class SDRadioElement extends SDOptionElement {
+	/**
+	 * @inheritdoc
+	 */
+	public static styles = [
+		css`
+			label.sd-radio-container {
+				display: inline-flex;
+				align-items: center;
+
+				& input {
+					/* Hide the input, whilst still allowing focus */
+					height: 0;
+					opacity: 0;
+					position: absolute;
+					width: 0;
+				}
+
+				/**
+                 * Radio button replacement.
+                 */
+
+				& span[role="radio"] {
+					--size: calc(var(--size-m) - calc(var(--border-width-thin) * 2));
+					align-items: center;
+					border: var(--border-width-thin) solid var(--color-content-disabled);
+					border-radius: var(--rounding-full);
+					display: inline-flex;
+					height: var(--size);
+					justify-content: center;
+					margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
+					user-select: none;
+					width: var(--size);
+				}
+
+				/**
+                 * Checked.
+                 */
+
+				& input:checked {
+					& + span[role="radio"] {
+						background: var(--color-surface-accent);
+						border-color: var(--color-content-disabled);
+						border-radius: var(--rounding-full);
+					}
+
+					& + span[role="radio"]::before {
+						content: "";
+						background: var(--color-surface-ondark);
+						border-radius: var(--rounding-full);
+						display: block;
+						height: var(--size-xs);
+						position: absolute;
+						width: var(--size-xs);
+					}
+				}
+
+				/**
+                 * Disabled.
+                 */
+
+				&:has(input:disabled) {
+					color: var(--color-content-disabled);
+				}
+
+				& input:disabled + span[role="radio"] {
+					border-color: var(--color-border-subtle-disabled);
+				}
+
+				/**
+                 * Checked + disabled.
+                 */
+
+				& input:checked:disabled {
+					& + span[role="radio"] {
+						background-color: var(--color-surface-disabled);
+					}
+
+					& + span[role="radio"]::before {
+						background-color: var(--color-content-disabled);
+					}
+				}
+
+				/**
+                 * Focus
+                 */
+
+				& input:focus-visible + span[role="radio"] {
+					box-shadow: var(--highlight-box-shadow);
+					outline: var(--highlight-outline--focus);
+					outline-offset: var(--highlight-outline-offset);
+				}
+			}
+		`,
+	];
+
+	/**
+	 * Determines whether the shared styles have already been appended to the document.
+	 */
+	static #isStyleAppended = false;
+
+	/**
+	 * Name of the radio button group the element is associated with.
+	 */
+	@property()
+	public accessor name: string | undefined = undefined;
+
+	/**
+	 * Determines whether the radio button is checked; default `false`.
+	 */
+	@property({
+		reflect: true,
+		type: Boolean,
+	})
+	public accessor checked: boolean = false;
+
+	/**
+	 * Fallback label, derived from the original inner text of this element when creating the render root.
+	 */
+	#fallbackLabel: string | undefined;
+
+	/**
+	 * @inheritdoc
+	 */
+	public override connectedCallback(): void {
+		super.connectedCallback();
+		if (SDRadioElement.#isStyleAppended) {
+			return;
+		}
+
+		// As the root of the element is not a shadow DOM, we can't scope styles, so instead we add
+		// the styles as a <style> element to the document.
+		const style = document.createElement("style");
+		style.innerHTML = SDRadioElement.styles
+			.map((s) => s.toString())
+			.filter((s) => s !== "")
+			.join("\n");
+
+		// Only add the <style> element once.
+		SDRadioElement.#isStyleAppended = true;
+		document.head.append(style);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public override render(): TemplateResult {
+		return html`
+			<label
+				class="sd-radio-container"
+				@mousedown=${preventDoubleClickSelection}
+				@change=${(ev: Event): void => {
+					// Propagate the change on the component.
+					ev.stopImmediatePropagation();
+					this.dispatchEvent(new Event("change", { bubbles: true }));
+				}}
+			>
+				<input
+					name=${ifDefined(this.name)}
+					type="radio"
+					tabindex=${ifDefined(this.disabled ? undefined : 0)}
+					.checked=${this.checked}
+					.disabled=${this.disabled}
+				/>
+				<span role="radio" aria-checked=${this.checked}></span>
+				${this.label ?? this.#fallbackLabel}
+			</label>
+		`;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected override createRenderRoot(): DocumentFragment | HTMLElement {
+		// Shadow root has to be open to allow for joining named radio buttons.
+		this.#fallbackLabel = this.innerText;
+		this.innerHTML = "";
+
+		return this;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * Element that offers an option in the form of a radio button.
+		 */
+		"sd-radio": SDRadioElement;
+	}
+}
diff --git a/src/ui/controllers/option-controller.ts b/src/ui/controllers/option-controller.ts
new file mode 100644
index 0000000..1af82ac
--- /dev/null
+++ b/src/ui/controllers/option-controller.ts
@@ -0,0 +1,109 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+import { SDOptionElement } from "../components/option";
+
+/**
+ * Controller for tracking {@link SDOptionElement} within a host.
+ */
+export class OptionController implements ReactiveController {
+	/**
+	 * Current options within the host.
+	 */
+	public readonly options: SDOptionElement[] = [];
+
+	/**
+	 * Host this controller is attached to.
+	 */
+	readonly #host: HTMLElement & ReactiveControllerHost;
+
+	/**
+	 * Underlying mutation observer monitoring changes to the shadow DOM.
+	 */
+	readonly #observer: MutationObserver;
+
+	/**
+	 * Requests a host update which is processed asynchronously.
+	 */
+	readonly #requestUpdate: () => void;
+
+	/**
+	 * Initializes a new instance of the {@link OptionController} class.
+	 * @param host Host to attach to.
+	 */
+	constructor(host: HTMLElement & ReactiveControllerHost) {
+		this.#host = host;
+		this.#host.addController(this);
+		this.#requestUpdate = (): void => this.#host.requestUpdate();
+
+		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
+		this.#setOptionsByQueryingHost();
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public hostConnected(): void {
+		this.#observer.observe(this.#host, { childList: true });
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public hostDisconnected(): void {
+		this.#observer.disconnect();
+	}
+
+	/**
+	 * Handles a mutation on the host's shadow DOM, updating the tracked collection of nodes.
+	 * @param mutations Mutations that occurred.
+	 */
+	#onMutation(mutations: MutationRecord[]): void {
+		let isOptionRemoved = false;
+
+		for (const { addedNodes, removedNodes } of mutations) {
+			// When a new option was added, simply rebuild the collection of options to maintain correct ordering.
+			for (const added of addedNodes) {
+				if (added instanceof SDOptionElement) {
+					this.#setOptionsByQueryingHost();
+					return;
+				}
+			}
+
+			// When an option was removed, remove it from the collection, but continue the evaluation.
+			for (const removed of removedNodes) {
+				if (removed instanceof SDOptionElement) {
+					const index = this.options.indexOf(removed);
+					if (index !== -1) {
+						this.options
+							.splice(index, 1)
+							.forEach((option) => option.removeEventListener("update", this.#requestUpdate));
+
+						isOptionRemoved = true;
+					}
+				}
+			}
+		}
+
+		if (isOptionRemoved) {
+			this.#host.requestUpdate();
+		}
+	}
+
+	/**
+	 * Sets the options associated with this instance by querying the host.
+	 */
+	#setOptionsByQueryingHost(): void {
+		this.options.length = 0;
+
+		this.#host.querySelectorAll(":scope > sd-option").forEach((option) => {
+			if (!(option instanceof SDOptionElement)) {
+				return;
+			}
+
+			this.options.push(option);
+			option.addEventListener("update", this.#requestUpdate);
+		});
+
+		this.#host.requestUpdate();
+	}
+}
diff --git a/src/ui/controllers/option-observer.ts b/src/ui/controllers/option-observer.ts
deleted file mode 100644
index 27c2e10..0000000
--- a/src/ui/controllers/option-observer.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
-
-import { SDOptionElement } from "../components/option";
-
-/**
- * Controller for tracking {@link SDOptionElement} elements within a host.
- */
-export class OptionObserver implements ReactiveController {
-	/**
-	 * Current options within the host.
-	 */
-	public readonly options: SDOptionElement[];
-
-	/**
-	 * Host this controller is attached to.
-	 */
-	readonly #host: HTMLElement & ReactiveControllerHost;
-
-	/**
-	 * Underlying mutation observer monitoring changes to the shadow DOM.
-	 */
-	readonly #observer: MutationObserver;
-
-	/**
-	 * Initializes a new instance of the {@link OptionObserver} class.
-	 * @param host Host to attached to.
-	 */
-	constructor(host: HTMLElement & ReactiveControllerHost) {
-		this.#host = host;
-		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
-
-		// Add the controller, and determine the initial set of options.
-		this.#host.addController(this);
-		this.options = Array.from(this.#host.querySelectorAll("sd-option"));
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hostConnected(): void {
-		this.#observer.observe(this.#host, {
-			childList: true,
-		});
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hostDisconnected(): void {
-		this.#observer.disconnect();
-	}
-
-	/**
-	 * Handles a mutation on the host's shadow DOM, updating the tracked collection of {@link SDOptionElement}.
-	 * @param mutations Mutations that occurred.
-	 */
-	#onMutation(mutations: MutationRecord[]): void {
-		let changed = false;
-
-		mutations.forEach((mutation) => {
-			// Added.
-			for (const added of mutation.addedNodes) {
-				if (added instanceof SDOptionElement) {
-					changed = true;
-					this.options.push(added);
-				}
-			}
-
-			// Removed.
-			mutation.removedNodes.forEach((node) => {
-				if (!(node instanceof SDOptionElement)) {
-					return;
-				}
-
-				const index = this.options.indexOf(node);
-				if (index !== -1) {
-					changed = true;
-					this.options.splice(index, 1);
-				}
-			});
-		});
-
-		if (changed) {
-			this.#host.requestUpdate();
-		}
-	}
-}
diff --git a/src/ui/mixins/list.ts b/src/ui/mixins/list.ts
index a26572b..0b45cdc 100644
--- a/src/ui/mixins/list.ts
+++ b/src/ui/mixins/list.ts
@@ -1,8 +1,8 @@
 import { LitElement } from "lit";
 
 import type { Constructor } from "../../common/utils";
-import type { SDOptionElement } from "../components/option";
-import { OptionObserver } from "../controllers/option-observer";
+import { SDOptionElement } from "../components/option";
+import { OptionController } from "../controllers/option-controller";
 
 /**
  * List mixin that provides common functionality for input elements that have options.
@@ -17,23 +17,16 @@ export const List = <TBase extends Constructor<LitElement> = typeof LitElement>(
 	 */
 	class ListMixin extends superClass {
 		/**
-		 * Mutation observer for monitoring {@link SDOptionElement} within the shadow DOM of this instance.
+		 * Option observer for monitoring {@link SDOptionElement} within this instance.
 		 */
-		readonly #domObserver = new OptionObserver(this);
+		readonly #optionObserver = new OptionController(this);
 
 		/**
 		 * Gets the items within the list.
 		 * @returns The list items.
 		 */
-		public get items(): Iterable<ListItem> {
-			return this.#domObserver.options.map((opt: SDOptionElement): ListItem => {
-				return {
-					disabled: opt.disabled,
-					key: opt,
-					label: opt.label,
-					value: opt.value,
-				};
-			});
+		public get items(): Iterable<SDOptionElement> {
+			return this.#optionObserver.options;
 		}
 	}
 
@@ -48,30 +41,5 @@ export declare class SDListElement extends LitElement {
 	 * Gets the items within the list.
 	 * @returns The list items.
 	 */
-	public get items(): Iterable<ListItem>;
+	public get items(): Iterable<SDOptionElement>;
 }
-
-/**
- * Information about an item within a list.
- */
-export type ListItem = {
-	/**
-	 * Determines whether the list item is disabled.
-	 */
-	disabled: boolean;
-
-	/**
-	 * Unique key that identifies the list item.
-	 */
-	key: unknown;
-
-	/**
-	 * Label of the list item.
-	 */
-	label: string;
-
-	/**
-	 * Value of the list item.
-	 */
-	value: boolean | number | string | undefined;
-};