[ @sdxc/u/state ]

placeholder

Styles an input or textarea's ::placeholder text.

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

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

Quick reference

Every documented call, beside the CSS it emits.

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

Examples

Basic example

Wrap utilities in placeholder() to style a field's placeholder text. Type in the field to see your text replace it:

<input
	type="text"
	placeholder="Search the docs…"
	mix={[
		border("neutral.border"),
		placeholder([fg("brand.muted"), raw({ fontStyle: "italic" })]),
		...,
	]}
/>

Responsive design

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

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

Signature

u.placeholder(input: UtilityInput<Node>)