# field-sizing

> Applies `field-sizing` to an `<input>`, `<textarea>`, or `<select>`.

```ts
import { fieldSizing } from "@sdxc/u/layout";
```

Applies `field-sizing` to an `<input>`, `<textarea>`, or `<select>`.
Defaults to `"content"`, sizing the control to the value it holds; cap that
growth with `u.maxBs()` or `u.maxIs()` so overflow takes over past the cap.

## 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:

```tsx
<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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.fieldSizing())
```

## Responsive design

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

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

## Signature

```ts
u.fieldSizing(value?: FieldSizingValue)
```