diff --git a/src/lib/components/ui/Breadcrumbs.svelte b/src/lib/components/ui/Breadcrumbs.svelte
new file mode 100644
index 00000000..95ee514a
--- /dev/null
+++ b/src/lib/components/ui/Breadcrumbs.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
+
+  /**
+   * Breadcrumbs component
+   *
+   * Use this component to display a navigation path to the current page.
+   *
+   * Features:
+   * - Automatically generates breadcrumbs based on the current route
+   * - Set `collapseOnMobile` to true to show only the first and last items on mobile devices
+   * - Set `inverse` to true to show white links on dark backgrounds (ensure contrast ratio of 4.5:1)
+   * - Optionally provide custom items array to override automatic breadcrumb generation
+   */
+
+  // Define the BreadcrumbItem type
+  export type BreadcrumbItem = {
+    text: string;
+    href: string;
+  };
+
+  // Component props
+  let {
+    items = undefined,
+    collapseOnMobile = false,
+    inverse = false,
+    ariaLabel = "Breadcrumb",
+  } = $props<{
+    items?: BreadcrumbItem[];
+    collapseOnMobile?: boolean;
+    inverse?: boolean;
+    ariaLabel?: string;
+  }>();
+
+  // Load all page modules for route detection
+  const routeModules = $state<Record<string, any>>({});
+
+  onMount(async () => {
+    try {
+      // Use Vite's glob import to get all page components
+      const modules = import.meta.glob("/src/routes/**/+page.svelte", {
+        eager: true,
+      });
+      Object.assign(routeModules, modules);
+    } catch (error) {
+      console.warn("Failed to load route modules:", error);
+    }
+  });
+
+  // Add support detection
+  let isSupported = $state(false);
+  onMount(() => {
+    isSupported =
+      document.body?.classList.contains("govuk-frontend-supported") ?? false;
+  });
+
+  // State variable to hold the current breadcrumb items
+  let breadcrumbItems = $state<BreadcrumbItem[]>([]);
+
+  // Effect to update breadcrumb items when dependencies change
+  $effect(() => {
+    breadcrumbItems = items || generateBreadcrumbItems($page, routeModules);
+  });
+
+  // Generate breadcrumb items from the current route
+  function generateBreadcrumbItems(page, modules): BreadcrumbItem[] {
+    const path = page.url.pathname;
+    const pathSegments = path.split("/").filter((segment) => segment !== "");
+
+    // Always include home page
+    const items: BreadcrumbItem[] = [{ text: "Home", href: "/" }];
+
+    // Build up paths for each breadcrumb
+    let currentPath = "";
+
+    for (let i = 0; i < pathSegments.length; i++) {
+      currentPath += `/${pathSegments[i]}`;
+
+      // Check if this path has a corresponding +page.svelte file
+      const isValidRoute = isPathValid(currentPath, modules);
+
+      // Add breadcrumb if it's a valid route or the current page
+      if (isValidRoute || i === pathSegments.length - 1) {
+        // Try to get custom title from module exports
+        const customTitle = getCustomTitle(currentPath, modules, page.data);
+
+        // Format text (convert slug to readable text)
+        const text = customTitle || formatBreadcrumbText(pathSegments[i]);
+
+        items.push({
+          text: text,
+          href: currentPath,
+        });
+      }
+    }
+
+    return items;
+  }
+
+  // Check if a path has a corresponding page component
+  function isPathValid(path: string, modules: Record<string, any>): boolean {
+    // For the root path
+    if (path === "/") return true;
+
+    // Normalize the path to check against module paths
+    const modulePath = `/src/routes${path}/+page.svelte`;
+    const dynamicModulePaths = Object.keys(modules).filter((m) => {
+      // Convert dynamic route patterns like [id] to regex pattern that matches :id or actual values
+      const pattern = m.replace(/\[([^\]]+)\]/g, "([^/]+)");
+      const regex = new RegExp(
+        `^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
+      );
+      return regex.test(modulePath);
+    });
+
+    return dynamicModulePaths.length > 0;
+  }
+
+  // Try to get custom title from module exports
+  function getCustomTitle(
+    path: string,
+    modules: Record<string, any>,
+    pageData: any,
+  ): string | null {
+    const modulePath = `/src/routes${path}/+page.svelte`;
+
+    // Check for exact match first
+    if (modules[modulePath]) {
+      // Check if module exports pageTitle
+      if (modules[modulePath].pageTitle) {
+        return modules[modulePath].pageTitle;
+      }
+
+      // Check if module exports getPageTitle function
+      if (typeof modules[modulePath].getPageTitle === "function") {
+        return modules[modulePath].getPageTitle(pageData);
+      }
+    }
+
+    // Check for dynamic routes
+    const dynamicModulePath = Object.keys(modules).find((m) => {
+      const pattern = m.replace(/\[([^\]]+)\]/g, "([^/]+)");
+      const regex = new RegExp(
+        `^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
+      );
+      return regex.test(modulePath);
+    });
+
+    if (dynamicModulePath && modules[dynamicModulePath]) {
+      if (modules[dynamicModulePath].pageTitle) {
+        return modules[dynamicModulePath].pageTitle;
+      }
+
+      if (typeof modules[dynamicModulePath].getPageTitle === "function") {
+        return modules[dynamicModulePath].getPageTitle(pageData);
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Converts route segments to human-readable text
+   */
+  function formatBreadcrumbText(text: string): string {
+    // Handle special cases
+    if (text === "ui") return "UI Components";
+    if (text === "data-vis") return "Data Visualization";
+    if (text === "content") return "Content Components";
+    if (text === "layout") return "Layout Components";
+    if (text === "user-guide") return "User Guide";
+    if (text === "playground") return "Playground";
+    if (text === "components") return "Components";
+    if (text === "local-lib") return "Local Library";
+
+    // Default: capitalize and replace hyphens with spaces
+    return text
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+  }
+</script>
+
+<nav
+  class="govuk-breadcrumbs
+    {collapseOnMobile ? 'govuk-breadcrumbs--collapse-on-mobile' : ''} 
+    {inverse ? 'govuk-breadcrumbs--inverse' : ''}"
+  aria-label={ariaLabel}
+>
+  <ol class="govuk-breadcrumbs__list">
+    {#each breadcrumbItems as item}
+      <li class="govuk-breadcrumbs__list-item">
+        <a class="govuk-breadcrumbs__link" href={item.href}>{item.text}</a>
+      </li>
+    {/each}
+  </ol>
+</nav>
diff --git a/src/lib/components/ui/CheckBox.svelte b/src/lib/components/ui/CheckBox.svelte
index 9f1ad5af..f440ed9e 100644
--- a/src/lib/components/ui/CheckBox.svelte
+++ b/src/lib/components/ui/CheckBox.svelte
@@ -14,7 +14,7 @@
   };
 
   // Component props
-  const {
+  let {
     legend,
     hint,
     error,
@@ -24,6 +24,7 @@
     small = false,
     options = [],
     validate = undefined,
+    selectedValues = $bindable([]),
   } = $props<{
     legend: string;
     hint?: string;
@@ -34,11 +35,9 @@
     small?: boolean;
     options?: CheckboxOption[];
     validate?: (values: string[]) => string | undefined;
+    selectedValues?: string[];
   }>();
 
-  // Component state
-  let selectedValues = $state<string[]>([]);
-
   // Add support detection
   let isSupported = $state(false);
   // Check for browser support on mount
diff --git a/src/lib/components/ui/Radios.svelte b/src/lib/components/ui/Radios.svelte
index cb7deec3..f74079fd 100644
--- a/src/lib/components/ui/Radios.svelte
+++ b/src/lib/components/ui/Radios.svelte
@@ -14,7 +14,8 @@
   };
 
   // Component props
-  const {
+  let {
+    selectedValue = $bindable(null),
     legend,
     hint,
     error,
@@ -36,11 +37,9 @@
     inline?: boolean;
     options?: RadioOption[];
     validate?: (value: string) => string | undefined;
+    selectedValue?: string | null;
   }>();
 
-  // Component state for single selection
-  let selectedValue = $state<string | null>(null);
-
   // Add support detection
   let isSupported = $state(false);
   onMount(() => {
@@ -48,16 +47,9 @@
       document.body?.classList.contains("govuk-frontend-supported") ?? false;
   });
 
-  // Derived state to check if a value is selected and handle validation
-  let isChecked = $derived((value: string) => selectedValue === value);
   let validationError = $derived<string | undefined>(
     isSupported && validate ? validate(selectedValue ?? "") : undefined,
   );
-
-  function toggleRadio(option: RadioOption) {
-    if (!isSupported) return;
-    selectedValue = selectedValue === option.value ? null : option.value;
-  }
 </script>
 
 <div
@@ -101,7 +93,9 @@
     {/if}
 
     <div
-      class="govuk-radios{small ? ' govuk-radios--small' : ''}{inline ? ' govuk-radios--inline' : ''}"
+      class="govuk-radios{small ? ' govuk-radios--small' : ''}{inline
+        ? ' govuk-radios--inline'
+        : ''}"
       data-module="govuk-radios"
       role="radiogroup"
       aria-labelledby="{name}-legend"
@@ -120,7 +114,7 @@
         <div
           class="govuk-radios__item"
           role="radio"
-          aria-checked={isSupported ? isChecked(option.value) : null}
+          aria-checked={isSupported ? selectedValue === option.value : null}
         >
           <input
             type="radio"
@@ -128,6 +122,7 @@
             id="{name}-{i}"
             class="govuk-radios__input"
             value={option.value}
+            bind:group={selectedValue}
             data-aria-controls={option.conditional?.id}
             aria-describedby={[
               option.hint ? `${name}-${i}-hint` : null,
@@ -135,8 +130,6 @@
             ]
               .filter(Boolean)
               .join(" ")}
-            checked={isChecked(option.value)}
-            onchange={() => toggleRadio(option)}
             data-behaviour={option.exclusive ? "exclusive" : undefined}
           />
           <label
@@ -162,7 +155,7 @@
           <div
             id={option.conditional.id}
             class="govuk-radios__conditional{!isSupported ||
-            !isChecked(option.value)
+            selectedValue !== option.value
               ? ' govuk-radios__conditional--hidden'
               : ''}"
             role="region"
@@ -180,4 +173,4 @@
       {/each}
     </div>
   </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 40b14b26..bdad7602 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import DividerLine from "$lib/components/layout/DividerLine.svelte";
+  import Breadcrumbs from "$lib/components/ui/Breadcrumbs.svelte";
   import "../app.css";
   let { children, data } = $props();
 
@@ -21,5 +22,9 @@
     </div>
   </a>
 
+  <div class="g-top-level-container mb-6">
+    <Breadcrumbs collapseOnMobile={true} />
+  </div>
+
   {@render children()}
 </div>
diff --git a/src/routes/components/ui/breadcrumbs/+page.svelte b/src/routes/components/ui/breadcrumbs/+page.svelte
new file mode 100644
index 00000000..9e22f1c1
--- /dev/null
+++ b/src/routes/components/ui/breadcrumbs/+page.svelte
@@ -0,0 +1,280 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import DividerLine from "$lib/components/layout/DividerLine.svelte";
+  import Breadcrumbs from "$lib/components/ui/Breadcrumbs.svelte";
+  import { defaultScreenWidthBreakpoints } from "$lib/config.js";
+  import ComponentDetails from "$lib/package-wrapping/ComponentDetails.svelte";
+  import ParametersSection from "$lib/package-wrapping/ParametersSection.svelte";
+  import ScreenSizeRadio from "$lib/package-wrapping/ScreenSizeRadio.svelte";
+  import { addIndexAndInitalValue } from "$lib/utils/package-wrapping-specific/addIndexAndInitialValue.js";
+  import { createParametersObject } from "$lib/utils/package-wrapping-specific/createParametersObject.js";
+  import { trackVisibleParameters } from "$lib/utils/package-wrapping-specific/trackVisibleParameters.js";
+  import { textStringConversion } from "$lib/utils/text-string-conversion/textStringConversion.js";
+  import CodeBlock from "$lib/components/content/CodeBlock.svelte";
+
+  interface PageProps {
+    data: any;
+    homepage?: boolean;
+    folders?: string[];
+  }
+
+  interface ComponentMetadata {
+    status: string;
+    description: Array<{
+      content: string;
+      markdown?: boolean;
+    }>;
+    context: Array<{
+      content: string;
+    }>;
+    childComponents: undefined;
+    requirements: undefined;
+    name?: string;
+    folder?: string;
+  }
+
+  let { data, homepage = undefined, folders } = $props();
+
+  let details: ComponentMetadata = {
+    status: "complete_in_use",
+    description: [
+      {
+        content:
+          "A navigation component that helps users understand where they are in a website's hierarchy.",
+      },
+      {
+        content:
+          'Based on the <a href="https://design-system.service.gov.uk/components/breadcrumbs/" target="_blank" rel="noopener noreferrer">GOV.UK Design System breadcrumbs component</a> pattern.',
+        markdown: true,
+      },
+    ],
+    context: [
+      {
+        content:
+          "Use the breadcrumbs component to help users understand where they are in the website's hierarchy and navigate back to higher levels.",
+      },
+      {
+        content:
+          "The component automatically generates breadcrumbs based on the current route, but can also accept custom items.",
+      },
+    ],
+    childComponents: undefined,
+    requirements: undefined,
+  };
+
+  let pageInfo = $page.route?.id?.split("/") ?? [];
+
+  details.name = textStringConversion(
+    folders ? folders[folders.length - 1] : pageInfo[pageInfo.length - 1],
+    "title-first-word",
+  );
+  details.folder = folders
+    ? folders[folders.length - 2]
+    : pageInfo[pageInfo.length - 2];
+
+  let demoScreenWidth = $state(defaultScreenWidthBreakpoints.md);
+
+  let parametersSourceArray =
+    homepage ??
+    addIndexAndInitalValue([
+      {
+        name: "items",
+        category: "Content",
+        isProp: true,
+        inputType: "javascript",
+        value: JSON.stringify(
+          [
+            { text: "Home", href: "/" },
+            { text: "Components", href: "/components" },
+            { text: "UI Components", href: "/components/ui" },
+            { text: "Breadcrumbs", href: "/components/ui/breadcrumbs" },
+          ],
+          null,
+          2,
+        ),
+      },
+      {
+        name: "collapseOnMobile",
+        category: "Display Options",
+        isProp: true,
+        inputType: "checkbox",
+        value: true,
+      },
+      {
+        name: "inverse",
+        category: "Display Options",
+        isProp: true,
+        inputType: "checkbox",
+        value: false,
+      },
+      {
+        name: "ariaLabel",
+        category: "Accessibility",
+        isProp: true,
+        inputType: "input",
+        value: "Breadcrumb",
+      },
+    ]);
+
+  let parametersValuesArray = $state(
+    homepage ?? parametersSourceArray.map((el) => el.value),
+  );
+
+  let items = $derived(homepage ?? JSON.parse(parametersValuesArray[0]));
+
+  let derivedParametersObject = $derived(homepage ?? { items });
+
+  let parametersVisibleArray = $derived(
+    homepage ??
+      trackVisibleParameters(parametersSourceArray, parametersValuesArray),
+  );
+
+  let parametersObject = $derived(
+    homepage ??
+      createParametersObject(
+        parametersSourceArray,
+        parametersValuesArray,
+        derivedParametersObject,
+      ),
+  );
+</script>
+
+<ComponentDetails {homepage} {details}></ComponentDetails>
+
+{#if !homepage}
+  <ParametersSection
+    {details}
+    {parametersSourceArray}
+    {parametersVisibleArray}
+    bind:parametersValuesArray
+  ></ParametersSection>
+
+  <div data-role="demo-section">
+    <h5 class="mb-6 mt-12 underline underline-offset-4">Component Demo</h5>
+    <ScreenSizeRadio bind:demoScreenWidth></ScreenSizeRadio>
+  </div>
+
+  <div data-role="component-container">
+    <div
+      data-role="component-container-centered"
+      style="width: {demoScreenWidth}px;"
+    >
+      <div class="flex flex-col gap-4">
+        <div class="app-example-wrapper">
+          <div
+            class="app-example__frame app-example__frame--resizable app-example__frame--xs p-6"
+          >
+            <Breadcrumbs {...parametersObject}></Breadcrumbs>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-20" data-role="examples-section">
+    <DividerLine margin="30px 0px 30px 0px"></DividerLine>
+    <h5 class="mb-6 mt-12 underline underline-offset-4">Examples</h5>
+
+    <h6>Basic Automatically Generated Breadcrumbs</h6>
+    <CodeBlock
+      code={`
+<script>
+  import Breadcrumbs from '$lib/components/ui/Breadcrumbs.svelte';
+<\/script>
+
+<Breadcrumbs />
+`}
+    />
+
+    <div class="app-example-wrapper">
+      <div
+        class="app-example__frame app-example__frame--resizable app-example__frame--xs p-6"
+      >
+        <Breadcrumbs />
+      </div>
+    </div>
+
+    <h6>Custom Specified Breadcrumbs Items</h6>
+    <CodeBlock
+      code={`
+<Breadcrumbs
+  items={[
+    { text: "Home", href: "/" },
+    { text: "Products", href: "/products" },
+    { text: "Category", href: "/products/category" }
+  ]}
+/>
+`}
+    />
+
+    <div class="app-example-wrapper">
+      <div
+        class="app-example__frame app-example__frame--resizable app-example__frame--xs p-6"
+      >
+        <Breadcrumbs
+          items={[
+            { text: "Home", href: "/" },
+            { text: "Products", href: "/products" },
+            { text: "Category", href: "/products/category" },
+          ]}
+        />
+      </div>
+    </div>
+
+    <h6>Collapsed on Mobile with Inverse Colors</h6>
+    <CodeBlock
+      code={`
+<div class="bg-[#1d70b8] p-4">
+  <Breadcrumbs
+    items={[
+      { text: "Home", href: "/" },
+      { text: "Services", href: "/services" },
+      { text: "Support", href: "/services/support" }
+    ]}
+    collapseOnMobile={true}
+    inverse={true}
+  />
+</div>
+`}
+    />
+
+    <div class="app-example-wrapper">
+      <div
+        class="app-example__frame app-example__frame--resizable app-example__frame--xs p-6"
+      >
+        <div class="bg-[#1d70b8] p-4">
+          <Breadcrumbs
+            items={[
+              { text: "Home", href: "/" },
+              { text: "Services", href: "/services" },
+              { text: "Support", href: "/services/support" },
+            ]}
+            collapseOnMobile={true}
+            inverse={true}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  [data-role="examples-section"] {
+    max-width: 1024px;
+    margin: 0px auto;
+  }
+
+  [data-role="demo-section"] {
+    max-width: 1024px;
+    margin: 0px auto;
+  }
+
+  [data-role="component-container"] {
+    display: grid;
+    place-items: center;
+  }
+
+  [data-role="component-container-centered"] {
+    padding: 20px 0px;
+  }
+</style>
diff --git a/src/routes/components/ui/checkbox/+page.svelte b/src/routes/components/ui/checkbox/+page.svelte
index c968c063..15d2b40f 100644
--- a/src/routes/components/ui/checkbox/+page.svelte
+++ b/src/routes/components/ui/checkbox/+page.svelte
@@ -90,6 +90,13 @@
         inputType: "input",
         value: "Select all that apply",
       },
+      {
+        name: "selectedValues",
+        category: "Content",
+        isProp: true,
+        inputType: "javascript",
+        value: "[]",
+      },
       {
         name: "name",
         category: "Form",
@@ -209,6 +216,16 @@
       ),
   );
 
+  // Demo state for bindable example
+  let demoSelected = $state([]);
+
+  const demoOptions = [
+    { value: "option1", label: "Option 1" },
+    { value: "option2", label: "Option 2" },
+    { value: "option3", label: "Option 3" },
+    { value: "none", label: "None of the above", exclusive: true },
+  ];
+
   let snippetSections = [
     {
       value: "email",
@@ -853,36 +870,98 @@
         <CheckBox
           legend="Contact Methods"
           name="contact-methods-snippets"
-          options={[
-            {
-              value: "email",
-              label: "Email",
-              conditional: {
-                id: "email-details",
-                content: content1,
-              },
-            },
-            {
-              value: "phone",
-              label: "Phone",
-              conditional: {
-                id: "phone-details",
-                content: content2,
-              },
-            },
-            {
-              value: "preferences",
-              label: "Communication Preferences",
-              conditional: {
-                id: "preferences-details",
-                content: content3,
-              },
-            },
-          ]}
+          options={snippetSections}
         />
       </div>
     </div>
 
+    <!-- Example 12: Bindable Values -->
+    <h3 class="govuk-heading-m">Bindable Values</h3>
+    <CodeBlock
+      code={`<script>
+  import CheckBox from "$lib/components/ui/CheckBox.svelte";
+  
+  let selected = $state([]); // Initialise empty array for selections
+  
+  const options = [
+    { value: "option1", label: "Option 1" },
+    { value: "option2", label: "Option 2" },
+    { value: "option3", label: "Option 3" },
+    { value: "none", label: "None of the above", exclusive: true }
+  ];
+</script>
+
+<!-- Multiple select bound to the same values -->
+<div class="govuk-form-group">
+  <label class="govuk-label" for="select-input">
+    Select options from dropdown
+  </label>
+  <select
+    class="govuk-select"
+    id="select-input"
+    multiple
+    bind:value={selected}
+    size="4"
+    style="min-width: 300px; padding: 8px; height: auto;"
+  >
+    {#each options as option}
+      <option value={option.value} style="padding: 8px;">{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<div class="govuk-form-group mt-4">
+  <CheckBox
+    legend="Select options"
+    name="bindable-demo"
+    {options}
+    bind:selectedValues={selected}
+  />
+</div>
+
+<p class="govuk-body mt-4">Currently selected: {selected.join(', ')}</p>`}
+      language="svelte"
+    />
+
+    <div class="app-example-wrapper">
+      <div
+        class="app-example__frame app-example__frame--resizable app-example__frame--m p-6"
+      >
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="select-input">
+            Select options from dropdown
+          </label>
+          <select
+            class="govuk-select"
+            id="select-input"
+            multiple
+            bind:value={demoSelected}
+            size="4"
+            style="min-width: 300px; padding: 8px; height: auto;"
+          >
+            {#each demoOptions as option}
+              <option value={option.value} style="padding: 8px;"
+                >{option.label}</option
+              >
+            {/each}
+          </select>
+        </div>
+
+        <div class="govuk-form-group mt-4">
+          <CheckBox
+            legend="Select options"
+            name="bindable-demo"
+            options={demoOptions}
+            bind:selectedValues={demoSelected}
+          />
+        </div>
+
+        <p class="govuk-body mt-4">
+          Currently selected: {demoSelected.join(", ")}
+        </p>
+      </div>
+    </div>
+
     <!-- ...additional examples as needed... -->
   </div>
 {/if}
diff --git a/src/routes/components/ui/radios/+page.svelte b/src/routes/components/ui/radios/+page.svelte
index d3b08d53..b75d9f24 100644
--- a/src/routes/components/ui/radios/+page.svelte
+++ b/src/routes/components/ui/radios/+page.svelte
@@ -83,6 +83,13 @@
         inputType: "input",
         value: "",
       },
+      {
+        name: "selectedValue",
+        category: "Content",
+        isProp: true,
+        inputType: "input",
+        value: "",
+      },
       {
         name: "name",
         category: "Form",
@@ -205,6 +212,9 @@
       ),
   );
 
+  // Demo state for bindable example
+  let demoSelectedOption = $state("option2");
+
   let snippetSections = [
     {
       value: "email",
@@ -434,7 +444,7 @@
             {
               value: "none",
               label: "I do not wish to receive updates",
-              exclusive: true
+              exclusive: true,
             },
           ]}
         />
@@ -566,7 +576,9 @@
     </div>
 
     <!-- Example: Using Snippets -->
-    <h3 class="govuk-heading-m">Using Snippets and Nested Components for Conditional Content</h3>
+    <h3 class="govuk-heading-m">
+      Using Snippets and Nested Components for Conditional Content
+    </h3>
     <CodeBlock
       code={`<script>
   import Radios from "$lib/components/ui/Radios.svelte";
@@ -641,7 +653,9 @@
     />
 
     <div class="app-example-wrapper">
-      <div class="app-example__frame app-example__frame--resizable app-example__frame--m p-6">
+      <div
+        class="app-example__frame app-example__frame--resizable app-example__frame--m p-6"
+      >
         <Radios
           legend="Contact Method"
           name="contact-method-snippets"
@@ -649,6 +663,77 @@
         />
       </div>
     </div>
+
+    <!-- Example: Bindable Value -->
+    <h3 class="govuk-heading-m">Bindable Value</h3>
+    <CodeBlock
+      code={`<script>
+  import Radios from "$lib/components/ui/Radios.svelte";
+  
+  let selectedOption = $state("option2");
+  
+  const options = [
+    { value: "option1", label: "Option 1" },
+    { value: "option2", label: "Option 2" },
+    { value: "option3", label: "Option 3" }
+  ];
+</script>
+
+<div class="govuk-form-group">
+  <label class="govuk-label" for="option-input">
+    Type 'option1', 'option2', or 'option3' to select a radio button
+  </label>
+  <input
+    class="govuk-input"
+    id="option-input"
+    bind:value={selectedOption}
+    placeholder="Type an option value..."
+  />
+</div>
+
+<Radios
+  legend="Select an option"
+  name="bindable-demo"
+  {options}
+  bind:selectedValue={selectedOption}
+/>
+
+<p class="govuk-body">Currently selected: {selectedOption}</p>`}
+      language="svelte"
+    />
+
+    <div class="app-example-wrapper">
+      <div
+        class="app-example__frame app-example__frame--resizable app-example__frame--m p-6"
+      >
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="option-input">
+            Type 'option1', 'option2', or 'option3' to select a radio button
+          </label>
+          <input
+            class="govuk-input"
+            id="option-input"
+            bind:value={demoSelectedOption}
+            placeholder="Type an option value..."
+          />
+        </div>
+
+        <div class="mt-4">
+          <Radios
+            legend="Select an option"
+            name="bindable-demo"
+            options={[
+              { value: "option1", label: "Option 1" },
+              { value: "option2", label: "Option 2" },
+              { value: "option3", label: "Option 3" },
+            ]}
+            bind:selectedValue={demoSelectedOption}
+          />
+        </div>
+
+        <p class="govuk-body mt-4">Currently selected: {demoSelectedOption}</p>
+      </div>
+    </div>
   </div>
 {/if}
 
@@ -656,7 +741,12 @@
   <div class="govuk-form-group">
     <label class="govuk-label" for="email-input">Email Address</label>
     <div class="govuk-hint">We'll use this for important notifications</div>
-    <input class="govuk-input" id="email-input" name="email-input" type="email">
+    <input
+      class="govuk-input"
+      id="email-input"
+      name="email-input"
+      type="email"
+    />
   </div>
 {/snippet}
 
@@ -664,7 +754,7 @@
   <div class="govuk-form-group">
     <label class="govuk-label" for="phone-input">Phone Number</label>
     <div class="govuk-hint">Include country code if international</div>
-    <input class="govuk-input" id="phone-input" name="phone-input" type="tel">
+    <input class="govuk-input" id="phone-input" name="phone-input" type="tel" />
   </div>
 {/snippet}
 
@@ -675,7 +765,7 @@
       name="contact-timing"
       small={true}
       legendSize="s"
-      validate={(value) => !value ? "Please select a time slot" : undefined}
+      validate={(value) => (!value ? "Please select a time slot" : undefined)}
       options={[
         { value: "morning", label: "Morning (9am - 12pm)" },
         { value: "afternoon", label: "Afternoon (12pm - 5pm)" },