# placeholder

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

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

Styles an input or textarea's `::placeholder` text. Give the field a real
`<label>` too, since placeholder text vanishes on input and often renders
at low contrast; style the empty input itself with `u.placeholderShown()`.

## 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:

```tsx
<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.

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

## Signature

```ts
u.placeholder(input: UtilityInput<Node>)
```