diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
index 9b24026e33..fa04623159 100644
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@@ -11,6 +11,8 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
## Default
+`RadioButton` is intended to be used within a `RadioButtonGroup`. See [Standalone usage](#standalone-usage) for individual usage.
+
Create a group of radio buttons with a shared name and legend.
@@ -19,6 +21,12 @@ Create a group of radio buttons with a shared name and legend.
+## Standalone usage
+
+Use `RadioButton` individually with a bindable `checked` prop for simple use cases.
+
+
+
## Hidden legend
Visually hide the legend while maintaining accessibility.
diff --git a/docs/src/pages/framed/RadioButton/RadioButtonStandalone.svelte b/docs/src/pages/framed/RadioButton/RadioButtonStandalone.svelte
new file mode 100644
index 0000000000..97c7d2f15a
--- /dev/null
+++ b/docs/src/pages/framed/RadioButton/RadioButtonStandalone.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 3ce9aa220b..dfcdf67a2c 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -53,7 +53,11 @@
add({ id, checked, disabled, value });
}
- $: checked = $selectedValue === value;
+ // Only sync checked when inside RadioButtonGroup.
+ // This allows standalone `RadioButton` usage.
+ $: if (add) {
+ checked = $selectedValue === value;
+ }