feat: data-placeholder attribute for Select.Value (#284)

* feat: placeholder data attr * update docs * add changeset
huntabyte · Jan 18, 2024 · f0d80f6 · f0d80f6
1 parent 07b4333
commit f0d80f6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/quick-pandas-explain.md b/.changeset/quick-pandas-explain.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: adds `data-placeholder` attribute to `Select.Value` when no value is selected / when the placeholder is being displayed
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
@@ -214,6 +214,11 @@ export const value: APISchema = {
 		{
 			name: "select-value",
 			description: "Present on the value element."
+		},
+		{
+			name: "placeholder",
+			description:
+				"Present when the placeholder is being displayed (there isn't a value selected). You can use this to style the placeholder differently than the selected value."
 		}
 	]
 };

diff --git a/src/lib/bits/select/components/select-value.svelte b/src/lib/bits/select/components/select-value.svelte
@@ -20,7 +20,12 @@
 {#if asChild}
 	<slot {label} {attrs} />
 {:else}
-	<span bind:this={el} {...$$restProps} {...attrs}>
+	<span
+		bind:this={el}
+		{...$$restProps}
+		{...attrs}
+		data-placeholder={!label ? "" : undefined}
+	>
 		{label ? label : placeholder}
 	</span>
 {/if}