[ @sdxc/u/state ]

placeholderShown

Sugar over when("&:placeholder-shown", input), matching an input or textarea while it is empty and therefore still showing its placeholder.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { placeholderShown } from "@sdxc/u/state";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.placeholderShown(u.fg("neutral.muted"))`	`css({ "&:placeholder-shown": { color: "..." } })`

Examples

Basic example

Wrap utilities in placeholderShown() to style a field while it is empty. Type in the field to see it change:

<input
	type="text"
	placeholder="Coupon code"
	mix={[
		border("brand.strong"),
		placeholderShown([bg("transparent"), border("neutral.border")]),
		transition("background-color, border-color"),
		...,
	]}
/>

Floating label

Give the field a blank placeholder so placeholderShown() means empty, then move the text after it with precededBy(). Click into the field:

City

<label mix={[relative(), is(64)]}>
	<input
		type="text"
		placeholder=" "
		mix={[
			bg(),
			border("brand.strong"),
			placeholderShown(border("neutral.border")),
			is("100%"),
			...,
		]}
	/>
	<span
		mix={[
			absolute(),
			insTop(2),
			insIs(3),
			text("sm"),
			fg("neutral.muted"),
			pointerEvents("none"),
			transformOrigin("left"),
			transition("transform, color"),
			precededBy("input:not(:placeholder-shown), input:focus", [
				translateY(-6),
				scale(0.8),
				fg("brand"),
				bg(),
			]),
		]}
	>
		City
	</span>
</label>

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.placeholderShown(u.fg("neutral.muted")))

Signature

u.placeholderShown(input: UtilityInput<Node>)