# placeholderShown

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

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

Sugar over `when("&:placeholder-shown", input)`, matching an input or
textarea while it is empty and therefore still showing its placeholder.
Enables the float-label pattern with no JavaScript, paired with `u.has()`.

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

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

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

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

## Signature

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