diff --git a/v2/pink-sb/src/lib/selector/Base.svelte b/v2/pink-sb/src/lib/selector/Base.svelte
index 6a5ea3234f..ba2b44b061 100644
--- a/v2/pink-sb/src/lib/selector/Base.svelte
+++ b/v2/pink-sb/src/lib/selector/Base.svelte
@@ -8,18 +8,22 @@
 
 <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
     <slot />
+
     {#if label}
         <Layout.Stack inline gap="xxs">
             <label for={id}>
                 <Typography.Text variant="m-500">{label}</Typography.Text>
             </label>
-            {#if description}
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary"
-                    >{description}</Typography.Text
-                >
-            {:else if $$slots.description}
-                <slot name="description"></slot>
-            {/if}
+
+            <div class="description">
+                {#if description}
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {description}
+                    </Typography.Text>
+                {:else if $$slots.description}
+                    <slot name="description"></slot>
+                {/if}
+            </div>
         </Layout.Stack>
     {/if}
 </Layout.Stack>
@@ -28,4 +32,8 @@
     label {
         cursor: pointer;
     }
+
+    .description:empty {
+        display: none;
+    }
 </style>
diff --git a/v2/pink-sb/src/lib/selector/Checkbox.svelte b/v2/pink-sb/src/lib/selector/Checkbox.svelte
index 4220da32d5..36e4c3c045 100644
--- a/v2/pink-sb/src/lib/selector/Checkbox.svelte
+++ b/v2/pink-sb/src/lib/selector/Checkbox.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { createCheckbox } from '@melt-ui/svelte';
-    import { IconCheck, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
-    import { createEventDispatcher } from 'svelte';
     import Base from './Base.svelte';
     import Icon from '$lib/Icon.svelte';
+    import { createEventDispatcher } from 'svelte';
+    import { createCheckbox } from '@melt-ui/svelte';
+    import { IconCheck, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
 
     export let disabled: boolean = false;
     export let id: string | undefined = undefined;
diff --git a/v2/pink-sb/src/lib/selector/Switch.svelte b/v2/pink-sb/src/lib/selector/Switch.svelte
index a29ba0db8b..b287192aa4 100644
--- a/v2/pink-sb/src/lib/selector/Switch.svelte
+++ b/v2/pink-sb/src/lib/selector/Switch.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+    import Base from './Base.svelte';
     import { createSwitch } from '@melt-ui/svelte';
     import { createEventDispatcher } from 'svelte';
-    import Base from './Base.svelte';
 
     export let checked: boolean = false;
     export let disabled: boolean = false;
diff --git a/v2/pink-sb/src/stories/Checkbox.stories.svelte b/v2/pink-sb/src/stories/Checkbox.stories.svelte
index a13cd4f3c7..3779ae1c17 100644
--- a/v2/pink-sb/src/stories/Checkbox.stories.svelte
+++ b/v2/pink-sb/src/stories/Checkbox.stories.svelte
@@ -38,6 +38,9 @@
 <script>
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import { expect, within } from '@storybook/test';
+    import Anchor from '$lib/link/Anchor.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../lib/typography/Text.svelte';
 </script>
 
 <Template let:args>
@@ -46,7 +49,28 @@
 
 <Story name="Default" />
 <Story name="Checked" args={{ checked: true }} />
-<Story name="With description" args={{ description: 'This is a description text' }} />
 <Story name="Indeterminate" args={{ checked: 'indeterminate' }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
+<Story name="Descriptions">
+    <Stack gap="xxxl">
+        <Stack>
+            <Text variant="m-400">1. No description</Text>
+            <Selector.Checkbox label="Checkbox" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">2. Prop description</Text>
+            <Selector.Checkbox label="Checkbox" description="This is a description text" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">3. Slot description</Text>
+            <Selector.Checkbox label="Checkbox">
+                <Text variant="m-400" color="--fgcolor-neutral-tertiary" slot="description">
+                    This is a description as a slot. Here's a <Anchor href="#">link</Anchor> for demo.
+                </Text>
+            </Selector.Checkbox>
+        </Stack>
+    </Stack>
+</Story>
diff --git a/v2/pink-sb/src/stories/Radio.stories.svelte b/v2/pink-sb/src/stories/Radio.stories.svelte
index 5473888582..2532f969db 100644
--- a/v2/pink-sb/src/stories/Radio.stories.svelte
+++ b/v2/pink-sb/src/stories/Radio.stories.svelte
@@ -31,6 +31,9 @@
 <script>
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import { expect, within } from '@storybook/test';
+    import Anchor from '$lib/link/Anchor.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../lib/typography/Text.svelte';
 </script>
 
 <Template let:args>
@@ -39,7 +42,6 @@
 
 <Story name="Default" />
 <Story name="Checked" args={{ checked: true }} />
-<Story name="With description" args={{ description: 'This is a description text' }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
 <Story name="Group">
@@ -49,3 +51,33 @@
         <Selector.Radio id="id3" label="Option 3" group="group" name="group" value="3" />
     </Layout.Stack>
 </Story>
+
+<Story name="Descriptions">
+    <Stack gap="xxxl">
+        <Stack>
+            <Text variant="m-400">1. No description</Text>
+            <Selector.Radio label="Radio" value="1" id="id1" group="group" name="group" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">2. Prop description</Text>
+            <Selector.Radio
+                label="Radio"
+                value="2"
+                id="id2"
+                group="group"
+                name="group"
+                description="This is a description text"
+            />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">3. Slot description</Text>
+            <Selector.Radio label="Radio" value="3" id="id3" group="group" name="group">
+                <Text variant="m-400" color="--fgcolor-neutral-tertiary" slot="description">
+                    This is a description as a slot. Here's a <Anchor href="#">link</Anchor> for demo.
+                </Text>
+            </Selector.Radio>
+        </Stack>
+    </Stack>
+</Story>
diff --git a/v2/pink-sb/src/stories/Switch.stories.svelte b/v2/pink-sb/src/stories/Switch.stories.svelte
index aa0d910130..4729acaf9f 100644
--- a/v2/pink-sb/src/stories/Switch.stories.svelte
+++ b/v2/pink-sb/src/stories/Switch.stories.svelte
@@ -25,6 +25,9 @@
 <script>
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import { expect, within } from '@storybook/test';
+    import Anchor from '$lib/link/Anchor.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../lib/typography/Text.svelte';
 </script>
 
 <Template let:args>
@@ -32,13 +35,28 @@
 </Template>
 
 <Story name="Default" />
-<Story
-    name="With description"
-    args={{
-        description:
-            ' Provide a fallback file for advanced routing and proper page handling in SPA mode.'
-    }}
-/>
 <Story name="Checked" args={{ checked: true }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
+<Story name="Descriptions">
+    <Stack gap="xxxl">
+        <Stack>
+            <Text variant="m-400">1. No description</Text>
+            <Selector.Switch label="Switch" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">2. Prop description</Text>
+            <Selector.Switch label="Switch" description="This is a description text" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">3. Slot description</Text>
+            <Selector.Switch label="Switch">
+                <Text variant="m-400" color="--fgcolor-neutral-tertiary" slot="description">
+                    This is a description as a slot. Here's a <Anchor href="#">link</Anchor> for demo.
+                </Text>
+            </Selector.Switch>
+        </Stack>
+    </Stack>
+</Story>