[6.x] Radio items can now be disabled (#12319)

Radio items can now be disabled

Author: jackmcdade

resources/js/components/ui/Radio/Item.vue

@@ -16,10 +16,11 @@ const id = useId();
         <RadioGroupItem
             :id
             :value="value"
+            :disabled
             class="
                 shadow-ui-xs mt-0.5 size-4 cursor-default rounded-full
                 focus:focus-outline border border-gray-400/75 dark:border-none bg-white outline-hidden
-                data-[state=checked]:border-ui-accent
+                data-[state=checked]:border-ui-accent data-[disabled]:opacity-50
                 dark:bg-gray-400 dark:data-[state=checked]:border-none dark:data-[state=checked]:bg-gray-300
             "
         >
@@ -31,7 +32,7 @@ const id = useId();
                 "
             />
         </RadioGroupItem>
-        <label class="flex flex-col" :for="id">
+        <label class="flex flex-col" :class="{ 'opacity-50': disabled }" :for="id">
             <span class="text-sm font-normal text-gray-600 antialiased dark:text-gray-200">
                 <slot>{{ label || value }}</slot>
             </span>

resources/views/playground.blade.php

@@ -222,6 +222,18 @@
         </div>
     </section>
 
+    <section class="space-y-4">
+        <ui-heading size="lg">Disabled Radio Items</ui-heading>
+        <ui-radio-group name="favorite" label="Choose your favorite Star Wars movie">
+            <ui-radio-item label="A New Hope" value="ep4"/>
+            <ui-radio-item label="Empire Strikes Back" value="ep5" />
+            <ui-radio-item label="Return of the Jedi" value="ep6" />
+            <ui-radio-item disabled label="the Force Awakens" value="ep7" />
+            <ui-radio-item disabled label="The Last Jedi" value="ep8" />
+            <ui-radio-item disabled label="The Rise of Skywalker" value="ep9" />
+        </ui-radio-group>
+    </section>
+
     <section class="space-y-4">
         <ui-heading size="lg">Select</ui-heading>
         <div class="flex">