[ @sdxc/u/state ]
readOnly
Sugar over when('&:read-only, &[aria-readonly="true"]', input), matching native and ARIA read-only controls.
import { readOnly } from "@sdxc/u/state";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:
<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.
u.at("md", u.readOnly(u.bg("neutral.tint")))Signature
u.readOnly(input: UtilityInput<Node>)