# visuallyHidden

> Clips the host to a `1px` box taken out of layout flow, keeping its native focusability and tab order intact so screen readers and keyboard users still reach it.

```ts
import { visuallyHidden } from "@sdxc/u/a11y";
```

Clips the host to a `1px` box taken out of layout flow, keeping its native
focusability and tab order intact so screen readers and keyboard users
still reach it.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.visuallyHidden()` | `css({ position: "absolute", inlineSize: "1px", blockSize: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0", })` |

## Examples

### Basic example

Use `visuallyHidden()` to hide text on screen while keeping it in the accessibility tree, like the label of an icon-only button:

```tsx
<button type="button" mix={[...]}>
	<svg
		mix={[fill("currentColor")]}
		viewBox="0 0 24 24"
		width={20}
		height={20}
		aria-hidden="true"
	>
		<path d="M12 20.5S3 15 3 8.9A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 9 2.3C21 15 12 20.5 12 20.5z" />
	</svg>
	<span mix={[visuallyHidden()]}>Add to favorites</span>
</button>
```

### Hiding a form label

Hide a `<label>` visually when the design shows no label, so the field still has an accessible name:

```tsx
<form role="search" mix={[hstack({ gap: 2 })]}>
	<label htmlFor="site-search" mix={[visuallyHidden()]}>
		Search the docs
	</label>
	<input id="site-search" type="search" placeholder="Search…" mix={[...]} />
	<button type="submit" mix={[...]}>
		Search
	</button>
</form>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.visuallyHidden())
```

## Responsive design

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

```ts
u.at("md", u.visuallyHidden())
```

## Signature

```ts
u.visuallyHidden()
```