# touch-action

> Applies `touch-action`.

```ts
import { touchAction } from "@sdxc/u/general";
```

Applies `touch-action`. Defaults to `"none"`, the common case of a custom
drag handle or gesture surface that handles its own touch input.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.touchAction()` | `css({ touchAction: "none" })` |
| `u.touchAction("manipulation")` | `css({ touchAction: "manipulation" })` |

## Examples

### Basic example

Use `touchAction(value)` to choose which touch gestures the browser handles on an element, like `touchAction("pan-x")` for sideways panning only. On a touch screen, try panning each photo:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>touchAction("auto")</p>
		<div mix={[touchAction("auto"), overflow("auto"), is(40), bs(32), rounded("lg")]}>
			<div mix={[is(80), bs(64), ...]} />
		</div>
	</div>
	<div>
		<p mix={[...]}>touchAction("pan-x")</p>
		<div mix={[touchAction("pan-x"), overflow("auto"), is(40), bs(32), rounded("lg")]}>
			<div mix={[is(80), bs(64), ...]} />
		</div>
	</div>
	<div>
		<p mix={[...]}>touchAction()</p>
		<div mix={[touchAction(), overflow("auto"), is(40), bs(32), rounded("lg")]}>
			<div mix={[is(80), bs(64), ...]} />
		</div>
	</div>
</div>
```

### Fast repeated taps

Use `touchAction("manipulation")` on controls people tap quickly, so a double tap counts twice instead of zooming the page:

```tsx
<div mix={[hstack({ gap: 4, align: "center" })]}>
	<button aria-label="Remove one" mix={[touchAction("manipulation"), ...]}>
		−
	</button>
	<span mix={[tabularNums(), text("xl")]}>3</span>
	<button aria-label="Add one" mix={[touchAction("manipulation"), ...]}>
		+
	</button>
</div>
```

## Applying on a state

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

```ts
u.hover(u.touchAction())
```

## Responsive design

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

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

## Signature

```ts
u.touchAction(value?: TouchActionValue)
```