[ @sdxc/u/layout ]
field-sizing
Applies field-sizing to an <input>, <textarea>, or <select>.
import { fieldSizing } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.fieldSizing() | css({ fieldSizing: "content" }) |
u.fieldSizing("fixed") | css({ fieldSizing: "fixed" }) |
Examples
Basic example
Use fieldSizing() to size a form control to the value it holds. Type in the field to see it grow:
<input value="Grows as you type" mix={[fieldSizing(), minIs(24), ...]} />Growing a textarea
Combine fieldSizing() with maxBs() to let a textarea grow with its text until the cap, then scroll. Add a few lines:
<textarea
value="A textarea that grows with each new line."
mix={[fieldSizing(), is(80), minBs(12), maxBs(40), ...]}
/>Keeping the fixed size
Use fieldSizing("fixed") to keep the platform's default size whatever the control holds:
<div mix={[vstack({ gap: 4, align: "start" })]}>
<input value="Hi" mix={[fieldSizing("fixed"), ...]} />
<input value="Hi" mix={[fieldSizing("content"), ...]} />
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.fieldSizing())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.fieldSizing())Signature
u.fieldSizing(value?: FieldSizingValue)