# readOnly

> Sugar over `when('&:read-only, &[aria-readonly="true"]', input)`, matching native and ARIA read-only controls.

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

Sugar over `when('&:read-only, &[aria-readonly="true"]', input)`, matching
native and ARIA read-only controls. They stay focusable and keep submitting
their value with the form, so give them a flat, normal-but-static style.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.readOnly(u.bg("neutral.tint"))` | `css({ '&:read-only, &[aria-readonly="true"]': { backgroundColor: "..." } })` |

## Examples

### Basic example

Wrap utilities in `readOnly()` to style a field that can be focused and copied but not edited. Try typing in both fields:

```tsx
<div mix={[...]}>
	<label mix={[vstack({ gap: 1 }), text("sm"), weight("medium")]}>
		Display name
		<input
			type="text"
			value="Ada Lovelace"
			mix={[
				border("neutral.border"),
				readOnly([
					bg("transparent"),
					border("transparent"),
					fg("neutral.muted"),
					cursor("default"),
				]),
				...,
			]}
		/>
	</label>
	<label mix={[vstack({ gap: 1 }), text("sm"), weight("medium")]}>
		Account ID
		<input
			type="text"
			value="acct_7f3a91"
			readonly
			mix={[
				border("neutral.border"),
				readOnly([
					bg("transparent"),
					border("transparent"),
					fg("neutral.muted"),
					cursor("default"),
				]),
				...,
			]}
		/>
	</label>
</div>
```

## Responsive design

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

```ts
u.at("md", u.readOnly(u.bg("neutral.tint")))
```

## Signature

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